在网页的布局过程中，经常会用到float属性来实现页面的左右布局，但是有个问题就是父元素的高度并不能根据子元素的高度自适应。比如下面这段代码：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>title</title></head><body> <div align="center" style="border: 1px solid blue;"> p <div style="float:left;width:45%;height:200px;border: 1px solid green;"> left </div> <div style="float:right;width:45%;height:150px;border: 1px solid red;">right</div> </div></body></html>
在浏览器中查看效果如下：
在有些情况下，我们需要父元素能够根据子元素的高度进行自适应，这时候你只需要给父div加个overflow:hidden就可以了。譬如：
<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head> <title>title</title></head><body> <div align="center" style="border: 1px solid blue;overflow:hidden;"> p <div style="float:left;width:45%;height:200px;border: 1px solid green;"> left </div> <div style="float:right;width:45%;height:150px;border: 1px solid red;">right</div> </div></body></html>
这样父元素的高度就能根据子元素的高度自适应了。在浏览器中查看效果如下：
立即学习“前端免费学习笔记（深入）”；
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
广告![ThinkPHP5快速开发企业站点[全程实录]](https://img.php.cn/upload/course/000/000/068/6253d918a3ce7278.png)
收藏
收藏
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
537
