码迷,mamicode.com
首页 > Web开发 > 详细

CSS float 父元素高度自适应

时间:2015-08-21 14:57:44      阅读:307      评论:0      收藏:0      [点我收藏+]

标签:

<html>
<head><title></title>
<style type="text/css">
*{margin:0 ;padding:0;}
.content{
border:1px solid red;
}
.fl{float:left}
</style>
</
head> <body>   <div class="content">   <div class="fl" >1</div><div class="fl">2</div>   </div> </body> </html>

结果如下:技术分享

class 拥有float的属性已经脱离正常的文档流,所以父元素中相当于没有正常文档流填充。高度为0,我们想让父节点高度自适应float元素的高度。

要在父元素里面加上overflow:hidden; 当包含float的 box的时候,高度自动适应在IE下无效,这时候应该触发IE的layout私有属性(万恶的IE啊!)用zoom:1;可以做到,这样就达到了兼容。 例如某一个wrapper如下定义: .content{ overflow:hidden; zoom:1; margin:5px auto;} 

CSS float 父元素高度自适应

标签:

原文地址:http://www.cnblogs.com/871735097-/p/4747637.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!