閉合浮動元素(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.wf0088.com]

<div id="wrap">
<div class="column_left">
<h1>Float left</h1>
</div>
<div class="column_right">
<h1>Float right</h1>
</div>
</div>

CSS樣式：

示例代碼 [www.wf0088.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;}