CSS float 父元素高度自适应

最新推荐文章于 2021-08-19 14:44:32 发布

ading0210

最新推荐文章于 2021-08-19 14:44:32 发布

阅读量155

点赞数

原文链接：http://www.cnblogs.com/871735097-/p/4747637.html

版权

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

转载于:https://www.cnblogs.com/871735097-/p/4747637.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ading0210

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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>...
复制链接

扫一扫