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

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

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

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

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

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

XHTML代碼：

示例代碼 [www.hl5o.cn]

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

CSS樣式：

示例代碼 [www.hl5o.cn]

#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;}