网页CSS技巧：闭合浮动元素超级复杂的方法
日期：2013-09-23 浏览次数：21141 次
关于闭合浮动元素（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：
这些方法我最喜欢就是 使用: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：
<div id="wrap">
<div class="column_left">
<h1>Float left</h1>
</div>
<div class="column_right">
<h1>Float right</h1>
</div>
</div>
<div class="column_left">
<h1>Float left</h1>
</div>
<div class="column_right">
<h1>Float right</h1>
</div>
</div>
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;}
.column_left{ float:left; width:20%; padding:10px;}
.column_right{ float:right; width:75%; padding:10px; border-left:6px #eee solid;}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
