无意中看到的一个非常不错的小技巧.是关于用CSS处理闭合浮动元素的方法,收藏了.

关于闭合浮动元素（clearingfloat）的方法现在已经很多了，你还不了解的话去old9的blog看看，有一篇闭合浮动元素。

这些方法我最喜欢就是使用:after伪类动态的嵌入一个用于清除浮动的元素，可惜代码量太大了，看着不够简洁。现在我看到有个方法超级简单。赶紧介绍一下。原文在：http://annevankesteren.nl/2005/03/clearing-floats

原理是这样的，外围元素之所以不能很好的延伸，问题出在了overflow上，因为overflow不可见。见W3C的解释

引用内容： Inaddition,iftheelementhasanyfloatingdescendantswhosebottommarginedgeisbelowthebottom,thentheheightisincreasedtoincludethoseedges.Onlyfloatsthatarechildrenoftheelementitselforofdescendantsinthenormalflowaretakenintoaccount,e.g.,floatsinsideabsolutelypositioneddescendantsorotherfloatsarenot.

现在只要将给外围元素添加一个overflow:auto;就可以解决问题，结果是除了IE，真的可以解决。下来就要解决ie的问题了，再加上_height:1%;，这个问题就完全解决了。

下面是我做的三个例子作为比较

1.没有闭合浮动元素

2.非IE下闭合浮动元素

3.完全闭合元素

Super simple clearing floats

Float left

这个层左浮动

.column_left{ float:left; width:20%; padding:10px;} Float right

这个层右浮动,下面是完整的CSS，这是一个外围wrap_three层应用overflow:auto;加_height:1%;闭合浮动的模型。外围容器可以正常延伸。IE6.0、Firefox 1.5和Opera 9.0都通过了测试。

#wrap_three{ 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;}

[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]