閉合浮動元素(clearingfloat)的簡單方法_Div+CSS教程
教程Tag：暫無Tag,歡迎添加,賺取U幣!
關于閉合浮動元素（clearing float）的方法現在已經很多了，個人認為簡單實用的方法就是使用:after偽類動態的嵌入一個用于清除浮動的元素，可惜代碼量太大了，看上去不夠簡潔。
現在看到有個方法超級簡單。介紹一下這個方法。原文在：http://annevankesteren.nl/2005/03/clearing-floats
這一方面的原理是，外圍元素之所以不能很好的延伸，問題出在了overflow上，因為overflow不可見（見W3C的解釋）。現在只要將給外圍元素添加一個“overflow:auto”，就可以解決問題，結果是除了IE，真的可以解決。下來就要解決ID的問題了，再加上“_height:1%”，這個問題就完全解決了。
下面的例子作為比較
1、沒有閉合浮動元素；2、非IE下閉合浮動元素；3、完全閉合元素。相關代碼如下：
XHTML代碼：
示例代碼 [www.ghpqjb.com]
<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樣式：
示例代碼 [www.ghpqjb.com]
#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;}
相關Div+CSS教程：
- 相關鏈接：
- 教程說明：
Div+CSS教程-閉合浮動元素(clearingfloat)的簡單方法
。