你的位置:首页 > 网页设计

[网页设计]使用float属性布局时父元素高度不能自适应的解决方法


  在网页的布局过程中,经常会用到float属性来实现页面的左右布局,但是有个问题就是父元素的高度并不能根据子元素的高度自适应。比如下面这段代码:

<!DOCTYPE html><html ="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 ="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>

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