|
|
關(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
原理是這樣的，外圍元素之所以不能很好的延伸，問(wèn)題出在了overflow上，因?yàn)閛verflow不可見(jiàn)。見(jiàn)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;就可以解決問(wèn)題，結(jié)果是除了IE，真的可以解決。下來(lái)就要解決ie的問(wèn)題了，再加上_height:1%; ，這個(gè)問(wèn)題就完全解決了。
下面是我做的三個(gè)例子作為比較
1.沒(méi)有閉合浮動(dòng)元素
2.非IE下閉合浮動(dòng)元素
3.完全閉合元素
[Ctrl+A 全選 注:如需引入外部Js需刷新才能執(zhí)行]
HTML/CSS技術(shù)：閉合浮動(dòng)元素超級(jí)簡(jiǎn)單的方法，轉(zhuǎn)載需保留來(lái)源！
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。
