天蚕土豆,古风君子以泽

無意中看到的一個(gè)非常不錯(cuò)的小技巧.是關(guān)于用CSS處理閉合浮動(dòng)元素的方法,收藏了.

關(guān)于閉合浮動(dòng)元素（clearing float）的方法現(xiàn)在已經(jīng)很多了，你還不了解的話去old9的blog看看，有一篇閉合浮動(dòng)元素。

這些方法我最喜歡就是使用:after 偽類動(dòng)態(tài)的嵌入一個(gè)用于清除浮動(dòng)的元素，可惜代碼量太大了，看著不夠簡(jiǎn)潔。現(xiàn)在我看到有個(gè)方法超級(jí)簡(jiǎn)單。趕緊介紹一下。原文在：http://annevankesteren.nl/2005/03/clearing-floats

原理是這樣的，外圍元素之所以不能很好的延伸，問題出在了overflow上，因?yàn)閛verflow不可見。見W3C的解釋

引用內(nèi)容：

In addition, if the element has any floating descendants whose bottom margin edge is below the bottom, then the height is increased to include those edges. Only floats that are children of the element itself or of descendants in the normal flow are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

現(xiàn)在只要將給外圍元素添加一個(gè)overflow:auto;就可以解決問題，結(jié)果是除了IE，真的可以解決。下來就要解決ie的問題了，再加上_height:1%; ，這個(gè)問題就完全解決了。

下面是我做的三個(gè)例子作為比較

1.沒有閉合浮動(dòng)元素
2.非IE下閉合浮動(dòng)元素
3.完全閉合元素

<P><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>Super simple clearing floats</title><style type="text/css"></style></head></P>
<P><body><div   class="fzrl5pf"   id="wrap_three"> <div   id="5zfnhld"   class="column_left">  <h1>Float left</h1>  <p>這個(gè)層左浮動(dòng)</p>  <code>.column_left{ float:left; width:20%; padding:10px;}</code> </div>  <div   id="ntlrjpt"   class="column_right">  <h1>Float right</h1> <p>這個(gè)層右浮動(dòng),下面是完整的CSS，這是一個(gè)外圍wrap_three層應(yīng)用<em>overflow:auto;</em>加<em>_height:1%;</em>閉合浮動(dòng)的模型。外圍容器可以正常延伸。IE6.0、Firefox 1.5和Opera 9.0都通過了測(cè)試。 </p> <code> #wrap_three{ 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;}</code> </div></div></body></html></P>

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

標(biāo)簽：欽州泰州攀枝花呂梁滄州海西佛山仙桃

巨人網(wǎng)絡(luò)通訊聲明：本文標(biāo)題《閉合浮動(dòng)元素超級(jí)簡(jiǎn)單的方法》，本文關(guān)鍵詞閉合,浮動(dòng),元素,超級(jí),簡(jiǎn)單,；如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題，煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們，我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò)，涉及言論、版權(quán)與本站無關(guān)。

濮阳杆衣贸易有限公司

閉合浮動(dòng)元素超級(jí)簡(jiǎn)單的方法