閉合浮動(dòng)元素(clearingfloat)的簡單方法_Div+CSS教程

教程Tag：暫無Tag,歡迎添加,賺取U幣!

關(guān)于閉合浮動(dòng)元素（clearing float）的方法現(xiàn)在已經(jīng)很多了，個(gè)人認(rèn)為簡單實(shí)用的方法就是使用:after偽類動(dòng)態(tài)的嵌入一個(gè)用于清除浮動(dòng)的元素，可惜代碼量太大了，看上去不夠簡潔。

現(xiàn)在看到有個(gè)方法超級(jí)簡單。介紹一下這個(gè)方法。原文在：http://annevankesteren.nl/2005/03/clearing-floats

這一方面的原理是，外圍元素之所以不能很好的延伸，問題出在了overflow上，因?yàn)閛verflow不可見（見W3C的解釋）。現(xiàn)在只要將給外圍元素添加一個(gè)“overflow:auto”，就可以解決問題，結(jié)果是除了IE，真的可以解決。下來就要解決ID的問題了，再加上“_height:1%”，這個(gè)問題就完全解決了。

下面的例子作為比較
1、沒有閉合浮動(dòng)元素；2、非IE下閉合浮動(dòng)元素；3、完全閉合元素。相關(guān)代碼如下：

XHTML代碼：

示例代碼 [m.dounai2.com]

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

CSS樣式：

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