無意中看到的一個非常不錯的小技巧.是關於用CSS處理閉合浮動元素的方法,收藏了.
關於閉合浮動元素（clearing float）的方法現在已經很多了，你還不瞭解的話去old9的blog看看，有一篇閉合浮動元素。
這些方法我最喜歡就是 使用:after 偽類動態嵌入一個用於清除浮動的元素，可惜代碼量太大了，看著不夠簡潔。現在我看到有個方法超級簡單。趕緊介紹一下。原文在：http://annevankesteren.nl/2005/03/clearing-floats
原理是這樣的，外圍元素之所以不能很好的延伸，問題出在了overflow上，因為overflow不可見。見W3C的解釋
引用內容：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.
現在只要將給外圍元素添加一個overflow:auto;就可以解決問題，結果是除了IE，真的可以解決。下來就要解決ie的問題了，再加上_height:1%; ，這個問題就完全解決了。
下面是我做的三個例子作為比較
1.沒有閉合浮動元素
2.非IE下閉合浮動元素
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"><!--body{ font:.9em/150% Verdana, Arial, Helvetica, sans-serif normal; color:#333333;}h1{ background:#f5f5f5; padding:6px;}em{ color:#f60; font-style:normal;}code{ display:block; font-family:"Courier New", Courier, monospace; border:1px #ccc dotted; padding:10px;}</p><P>#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;}</p><P>--></style></head></p><P><body> <h1>Float left</h1> <p>這個層左浮動</p> <code>.column_left{ float:left; width:20%; padding:10px;}</code> <h1>Float right</h1> <p>這個層右浮動,下面是完整的CSS，這是一個外圍wrap_three層應用<em>overflow:auto;</em>加<em>_height:1%;</em>閉合浮動的模型。外圍容器可以正常延伸。IE6.0、Firefox 1.5和Opera 9.0都通過了測試。 </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> </body></html></p>
[Ctrl+A 全選 注:如需引入外部Js需重新整理才能執行]
