使用float属性布局时父元素高度不能自适应的解决方法

　　在网页的布局过程中，经常会用到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>

　　这样父元素的高度就能根据子元素的高度自适应了。在浏览器中查看效果如下：

 

posted @ 2016-01-21 10:49  王小布AI  阅读(603)  评论(2)    收藏  举报