最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
子元素浮动后父容器的闭合
时间：2022-07-02 13:21:46 编辑：袖梨 来源：一聚教程网
关于闭合浮动元素（clearing float）的方法现在已经很多了，你还不了解的话去old9的blog看看，有一篇闭合浮动元素。
这些方法我最喜欢就是 使用:after 伪类动态的嵌入一个用于清除浮动的元素，可惜代码量太大了，看着不够简洁。现在我看到有个方法超级简单。赶紧介绍一下。
原理是这样的，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见。见W3C的解释：
In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Only floats that are children of the element itself or of descendants in the normal flow are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.
现在只要将给外围元素添加一个overflow:auto;就可以解决问题，结果是除了IE，真的可以解决。下来就要解决ie的问题了，再加上_height:1%; ，这个问题就完全解决了。
下面是我做的三个例子作为比较
XHtml：
Css：
#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;}
.column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}
这些方法我最喜欢就是 使用:after 伪类动态的嵌入一个用于清除浮动的元素，可惜代码量太大了，看着不够简洁。现在我看到有个方法超级简单。赶紧介绍一下。
原理是这样的，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见。见W3C的解释：
In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Only floats that are children of the element itself or of descendants in the normal flow are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.
现在只要将给外围元素添加一个overflow:auto;就可以解决问题，结果是除了IE，真的可以解决。下来就要解决ie的问题了，再加上_height:1%; ，这个问题就完全解决了。
下面是我做的三个例子作为比较
XHtml：
Css：
#wrap{ border:6px #ccc solid; overflow:auto; _height:1%;}
.column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}
相关文章
- 逆战未来枪械大全 逆战未来枪械稀有度等级与获取方式详解 07-19
- 逆战未来新手攻略 逆战未来萌新入门避坑指南 07-19
- "无醇啤酒"是完全不含酒精吗 蚂蚁庄园1月17日答案早知道 07-19
- "太常寺"是古代掌管什么事务的机构 蚂蚁新村1月16日答案 07-19
- 四川名菜"开水白菜"就是用开水炖白菜吗 蚂蚁庄园1月17日答案早知道 07-19
- 蚂蚁新村今天正确答案1.16 07-19