闭合浮动元素(clearing float)的复杂方法
日期：2014-04-04 浏览次数：21040 次
关于闭合浮动元素（clearing float）的方法如今曾经很多了，团体认为简单实用的方法就是使用:after伪类动态的嵌入一个用于清除浮动的元素，可惜代码量太大了，看上去不够简约。
这一方面的原理是，外围元素之所以不能很好的延伸，问题出在了overflow上，由于overflow不可见（见W3C的解释）。如今只需将给外围元素添加一个“overflow:auto”，就可以处理问题，结果是除了IE，真的可以处理。下来就要处理ID的问题了，再加上“_height:1%”，这个问题就完全处理了。
下面的例子作为比较
1、没有闭合浮动元素；2、非IE下闭合浮动元素；3、完全闭合元素。相关代码如下：
XHTML代码：
<div id="wrap">
<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;}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
