1、為什麼要清除浮動
我們前面說過，浮動本質是用來做一些文字混排效果的，但是被我們拿來做布局用，則會有很多的問題出現。
由於浮動元素不再占用原文件流的位置，所以它會對後面的元素排版產生影響，為了解決這些問題，此時就需要在該元素中清除浮動。
準確地說，並不是清除浮動，而是清除浮動後造成的影響
2、清除浮動本質
清除浮動的本質:主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。
我們來詳細解釋下這句話
再解釋下就是在標準流下面乙個父div沒有設定高度屬性,那麼它的高度就會被子元素的高度撐開。但是如果這個父div中的子元素是浮動的話，如果父div下面再有
乙個兄弟div，那麼這個兄弟div就會遮擋這個父元素。這個現象也叫浮動溢位。
示例
父div
子div
子div
兄弟div
很明顯這裡，div1和div2已經上浮，而兄弟div就往上移動。這裡因為父div有文字所以佔了點高度，不然兄弟div會完全覆蓋父div。
當然我們可以通過設定父div的高度，來使它不被兄弟div所覆蓋。比如這裡設定height: 200px;
在重新整理下頁面
當父div設定高度後，被覆蓋的問題卻是解決了，但在很多時候我們是不會去設定父div的高度，因為很多時候我們都不知道父div的高度要設定多少。
所以這個時候需要思考解決這個問題。
清除浮動的方法本質: 就是把父盒子裡浮動的盒子圈到裡面，讓父盒子閉合出口和入口不讓他們出來影響其他元素。
在css中，clear屬性用於清除浮動。
基本語法格式
選擇器屬性值
1、額外標籤法
通過在浮動元素末尾新增乙個空的標籤，例如
父div
子div
子div
兄弟div
完美解決了。
優點通俗易懂，書寫方便。
缺點新增無意義的標籤，結構化較差。
2、父級新增overflow屬性方法
可以通過觸發bfc的方式，可以實現清除浮動效果。（bfc後面會講）
可以給父級元素新增： overflow為 hidden|auto|scroll 都可以實現。父div
子div
子div
兄弟div
優點**簡潔
缺點內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素。
3、使用after偽元素清除浮動
:after 方式為空元素的公升級版，好處是不用單獨加標籤了**示例
優點符合閉合浮動思想 結構語義化正確
缺點由於ie6-7不支援:after，使用 zoom:1觸發 haslayout。
注意： content:"." 裡面盡量跟乙個小點，或者其他，盡量不要為空，否則再firefox 7.0前的版本會有生成空格。
4、使用before和after雙偽元素清除浮動
使用方法 將上面的clearfix樣式替換成如下
.clearfix:before, .clearfix:after
.clearfix:after
.clearfix
優點**更簡潔
缺點由於ie6-7不支援:after，使用 zoom:1觸發 haslayout。
5、總結
1、在網頁主要布局時使用:after偽元素方法並作為主要清理浮動方式.文件結構更加清晰；
2、在小模組如ul裡推薦使用overflow:hidden;（同時留意可能產生的隱藏溢位元素問題）；
你如果願意有所作為，就必須有始有終。(9)
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...
CSS清除浮動 清除float浮動
一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不能撐開，這樣浮動就產生了...