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