无意中看到的一个非常不错的小技巧.是关于用CSS处理闭合浮动元素的方法,收藏了.
关于闭合浮动元素(clearing float)的方法现在已经很多了,你还不了解的话去old9的blog看看,有一篇闭合浮动元素。
这些方法我最喜欢就是 使用:after 伪类动态的嵌入一个用于清除浮动的元素,可惜代码量太大了,看着不够简洁。现在我看到有个方法超级简单。赶紧介绍一下。原文在:http://annevankesteren.nl/2005/03/clearing-floats
原理是这样的,外围元素之所以不能很好的延伸,问题出在了overflow上,因为overflow不可见。见W3C的解释
现在只要将给外围元素添加一个overflow:auto;就可以解决问题,结果是除了IE,真的可以解决。下来就要解决ie的问题了,再加上_height:1%; ,这个问题就完全解决了。
下面是我做的三个例子作为比较
1.没有闭合浮动元素
3.完全闭合元素
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]