最簡單的一種情形就是我們把乙個小的、固定寬度的div元素（比如導航、引用等）和其他元素內容一起包含在乙個大的div中。比如下面這段**：
"outer
">
"inner
">
lorem ipsum
我們可以為「#inner」設定乙個寬度值（比如說20%），但是由於div是塊級元素，即使我們設定了寬度，其後面的內容也只能在下一行中顯示，除非我們給它設定乙個浮動屬性（無論是向左浮動或者向右浮動）。那麼此時會產生我們上面提到的問題了。
如果「#inner」的寬度和高度都比「#outer」小，這不會有問題。
但是，如果「#inner」的高度超過了「#outer」，那麼的底部就會超出「#outer」的底部。這是因為我們為「#inner」設定了float屬性後，它就會脫離的文字流，無論其寬度和高度怎麼變化都不會使「#outer」跟隨變化。
在這個例子中，最開始由於「#inner」的高度小於「#outer」所以不會有問題，但是當你點選「加長」後你會發現「#inner」的底邊已經超出了「#outer」的範圍，而「#outer」沒有發生改變。這就是我們所提到的「清除浮動（閉合浮動元素）」或者是「閉合浮動」問題
1）額外標籤法
第乙個，也是w3c推薦的方法就是使用額外標籤的辦法。這種方法就是在內容的末尾增加乙個空的標籤，典型的做法就是使用類似
或者使用
這種辦法通過增加乙個html元素迫使外部容器撐開。不過這個辦法會增加額外的標籤使html結構看起來不夠簡潔。
我發現在internet explorer中（無論是6還是7）
可以清除浮動，但是不能閉合浮動元素，在firefox中就沒有這個問題，不知道是什麼原因？！
2）使用after偽類
使用after偽類和內容宣告在指定的現在內容末尾新增新的內容。經常的做法就是新增乙個「點」，因為它比較小不太引人注意。然後我們再利用它來清除浮動（閉合浮動元素），並隱藏這個內容：
#outer:after
但奇怪的是windows中的internet explorer 6及以下版本並不支援css 2.1中的after偽類而mac中的internet explorer卻可以正常使用，所以我們還要單獨針對win/ie進行處理。在區分win和mac中internet explorer的諸多方法中，最常用就是holly招數。holly招數的原理是這樣的，css**
/* 這段**只有ie/win可以看見 \*/
css 規則
/* 結束hack */
上面的**中有兩行注釋，其中第一行結束時出現了反斜槓（\），在mac的internet explorer中會認為注釋並沒有結束，於是繼續向下直到第乙個完事的「*/」出現，這中間的所有字元都被當作是注釋，而ie/win卻也只會把第一行和第三行看作是注釋，中間的為有效**。所以這樣就區分出來了不同平台上的ie了。
正是基於以上原理，在windows的ie 6上的清理浮動，可以使用如下**：
#outer/*holly hack begine \
*/*html #outer
#outer
/*end hack
*/
如果你不考慮 ie6/mac使用者的話你只需要寫* html #outer 即可。
另外，似乎在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
注意：如果你要在ie5/mac上使用這種方法清除浮動（閉合浮動元素）的話，你就必須設定overflow的屬性為值為hidden。
四種方法中使用哪種最好呢？首先，不推薦使用after偽類，對比其它三種方法，holly招數有點太煩瑣，不好掌握，我上面講到的holly招數中並不僅僅是ie/win上有問題，當出現:hover時還會有其它問題，所以我們又加上了inline-block等屬性，也就是說這種方法存在更多的不確定性。推薦對**有「潔癖」並且技術較高的人使用。
那麼其它三種方法其實都可以考慮。
關於css清除浮動的幾種方法
給前面乙個父元素設定高度 給後面的盒子新增clear屬性 隔牆法 其又分為外牆法和內牆法 利用偽元素選擇器清除浮動 利用overflow hidden清除浮動 下面一一介紹 1 給前面乙個父元素設定高度 注意點 在企業開發中,我們能不寫高度就不寫高度,所以這種方式用得很少 如下 我是文字1 我是文字...
清除浮動的幾種方法
1.浮動元素下加空div 為了統一樣式，我們新建乙個樣式選擇器class命名為 clear 並且對應選擇器樣式為 clear both 然後我們在父級 結束前加此div引入class clear 樣式。這樣即可清除浮動。這個class 清除float產生浮動，可以不用對父級設定高度 也無需技術父級高...
清除浮動的幾種方法
當元素浮動時，他將不再處於普通文件流中，相當於浮在文件之上，不佔據空間，但是會縮短行寬，產生文字環繞的效果。浮動帶來的影響 1，父級的高度塌陷 2.背景不能顯示 3.變框不能撐開 4.margin值不能正確顯示 5.產生文字環繞的效果 6.由於脫離文件流，不佔位，而後面的元素未脫離文件流導致後面的元...