很多人都有研究閉合浮動元素的問題，但是解決方法卻不一樣，也並不是每一種方法都盡善盡美。閉合浮動元素（或叫清除浮動）是web標準設計中經常會遇到的一個問題，因此，這裡我想總結一下目前經常用到的幾種方法，並比較一下他們的易用性和適用環境。如果你有更好的方法不妨提出來大家一起討論。

最簡單的一種情形就是我們把一個小的、固定寬度的div元素（例如導航、引用等）和其他元素內容一起包含在一個大的div中。例如下面這段程式碼：

我們可以為「#inner」設定一個寬度值（比如說20%），但由於div是塊級元素，即使我們設定了寬度，其後面的內容也只能在下一行中顯示，除非我們給它設定一個浮動屬性（無論是向左浮動或向右浮動）。那麼此時就會產生我們上面提到的問題了。

如果「#inner」的寬度和高度都比「#outer」小，這不會有問題。

但是，如果“#inner”的高度超過了“#outer”，那麼的底部就會超出“#outer”的底部。這是因為我們為「#inner」設定了float屬性後，它就會脫離的文字流，無論其寬度和高度怎麼變化都不會使「#outer」跟隨變化。

解決方法：

1）額外標籤法

第一個，也是W3C推薦的方法就是使用額外標籤的方法。這種方法就是在內容的最後增加一個空的標籤，典型的做法就是使用類似：

或使用

這種辦法透過增加一個HTML元素來迫使外部容器撐開。不過這個辦法會增加額外的標籤讓HTML結構看起來不夠簡潔。

註：我發現在Internet Explorer中（無論是6還是7）
可以清除浮動，但是不能閉合浮動元素，在Firefox中就沒有這個問題，不知道是什麼原因？ ！

2）使用after偽類

使用after偽類和內容聲明在指定的現在內容末尾添加新的內容。經常的做法就是添加一個“點”，因為它比較小不太引人注意。然後我們再利用它來清除浮動（閉合浮動元素），並隱藏這個內容：
#outer:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;

奇怪的是Windows中的Internet Explorer 6及以下版本並不支援CSS 2.1中的after偽類而Mac中的Internet Explorer卻可以正常使用，所以我們還要單獨針對Win/IE進行處理。在區分Win和Mac中Internet Explorer的諸多方法中，最常用就是Holly招數，CSS程式碼：
/* 這段程式碼只有IE/Win可以看見*/
CSS 規則
/* 結束Hack */

上面的程式碼中有兩行註釋，其中第一行結束時出現了反斜線（），在Mac的Internet Explorer中會認為註釋並沒有結束，於是繼續向下直到第一個完事的「*/」出現，這中間的所有字元都被當作是註釋，而IE/Win卻也只會把第一行和第三行看作是註釋，中間的為有效程式碼。所以這樣就區分出來了不同平台上的IE了。

正是基於上述原理，在windows的IE 6上的清理浮動，可以使用以下程式碼：

#outer {
display:inline-block;
}
/* Holly Hack Begine */
* html #outer {
height:1%;
}
#outer {
display:block;
}
/* End Hack */

PS 如果你不考慮IE6/Mac用戶的話你只需要寫* html #outer {height:1%;}即可。
另外，似乎在Internet Explorer 7中不高display:inline-block也不好使。因此要使用最完整的Hack招數。

3）浮動外在元素，float-in-float

這種方法很簡單，就是把「#outer」元素也進行浮動（向左或向右）。

但是這種方法帶來的別外一個問題就是和「#outer」相鄰的下一個元素會受到「#outer」的影響位置會產生變化，所以使用這種方法一定要小心。有選擇把頁面中的所有元素都浮動起來，最後使用一個適當的有意義的元素（比如頁腳）進行清理浮動，這有助於減少不必要的標記，但是過多的浮動會增加佈局的難度。

4）設定overflow為hidden或auto

把「#outer」的屬性overflow值設定為hidden或auto同樣可以清理浮動

這種方法不需要增加額外的標記。但使用overflow的時候一定要小心，因為它會瀏覽器的表現。另外，在Internet Explorer 6中單純地設定overflow為hidden或auto並不能有效清除浮動（閉合浮動元素），還要指定「#outer」的一個維度，即要麼給它指定一個寬度，要麼指定一個高度：
#outer {
overflow:auto;
width:100%;
}

注意：如果你要在IE5/Mac上使用這種方法清除浮動（閉合浮動元素）的話，你就必須設定overflow的屬性為值為hidden。

比較與選擇

四種方法中使用哪一種最好呢？首先，不建議使用after偽類，對比其它三種方法，holly招數有點太煩瑣，不好掌握，我上面講到的holly招數中並不僅僅是IE/Win上有問題，當出現:hover時還會有其它問題，所以我們又加上了inline-block等屬性，也就是說這種方法有更多的不確定性。推薦對程式碼有「潔癖」且技術較高的人使用。

那麼其它三種方法其實都可以考慮。不過使用overflow的時候，可能會對頁面表現帶來影響，而且這種影響是不確定的，你最好是能在多個瀏覽器上測試你的頁面；

而對於使用額外標籤清除浮動（閉合浮動元素），是W3C推薦的做法。至於使用
元素還是空