无意中见到的一个十分非常好的小窍门.是有关用CSS解决闭合浮动元素的方法,个人收藏了.

有关闭合浮动元素(clearing float)的方法如今早已许多了,你要不了解得话去old9的blog看一下,有一篇闭合浮动元素。

这种方法我最喜欢便是 应用:after 伪类动态性的置入一个用以消除浮动的元素,遗憾编码量太大,看见不足简约。如今我看到有一个方法超级简单。赶快介绍一下。全文在:http://annevankesteren.nl/2005/03/clearing-floats

基本原理是那样的,外场元素往往不可以非常好的拓宽,难题出在了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%; ,这个问题就彻底解决了。

下边就是我做的三个事例做为较为

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需再更新一下网页页面才可以实行]