CSS float 父元素高度自适应 

<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;} 

posted @ 2015-08-21 13:33  米姐  阅读(1181)  评论(0)  编辑  收藏  举报