清除浮動是每乙個 web前台設計師必須掌握的技能。共8種方法。
浮動會使當前標籤產生向上浮的效果，同時會影響到前後標籤、父級標籤的位置及width、height屬性。而且同樣的**，在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了。解決浮動引起的問題有多種方法，但有些方法在瀏覽器相容性方面還有問題。
下面總結8種清除浮動的方法（測試已通過 ie、chrome、firefox、opera，後面三種方法只做了解就可以了）：
1、為父級div定義 height
**如下:
left
right
div2
原理：父級div手動定義height，就解決了父級div無法自動獲取到高度的問題。
優點：簡單、**少、容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
建議：不推薦使用，只建議高度固定的布局時使用
2、結尾處加空div標籤 clear:both
**如下:
left
right
div2
原理：新增乙個空div，利用css提高的clear:both清除浮動，讓父級div能自動獲取到高度
優點：簡單、**少、瀏覽器支援好、不容易出現怪問題
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
3、父級div定義 偽類:after 和 zoom
**如下:
left
right
div2
原理：ie8以上和非ie瀏覽器才支援:after，原理和方法2有點類似，zoom(ie專有屬性)可解決 ie6、ie7 浮動問題
缺點：**多、不少初學者不理解原理，要兩句**結合使用才能讓主流瀏覽器都支援。
建議：推薦使用，建議定義公共類，以減少css**。
4、父級div定義 overflow:hidden
**如下:
left
right
div2
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、**少、瀏覽器支援好
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。
5、父級div定義 overflow:auto
**如下:
left
right
div2
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度
優點：簡單、**少、瀏覽器支援好
缺點：內部寬高超過父級div時，會出現滾動條。
建議：不推薦使用，如果你需要出現滾動條或者確保你的**不會出現滾動條就使用吧。
6、父級div 也一起浮動
**如下:
left
right
div2
原理：所有**一起浮動，就變成了乙個整體
優點：沒有優點
缺點：會產生新的浮動問題。
建議：不推薦使用，只作了解。
7，父級div定義 display:table
**如下:
left
right
div2
原理：將div屬性變成**
優點：沒有優點
缺點：會產生新的未知問題。
建議：不推薦使用，只作了解。
8、結尾處加 br標籤 clear:both
**如下:
left
right
div2
原理：父級div定義zoom:1來解決ie浮動問題（相容性問題），結尾處加 br標籤 clear:both
建議：不推薦使用，只作了解。
下一標籤直接清浮動兄弟標籤浮動時，在下一標籤的屬性中直接寫入清除clear:both;這樣就可以清除以上標籤的浮動而不用加入空標籤來清除浮動。
**：
10 浮動和清除浮動影響
float 浮動 屬性 1 改變塊元素 block element 物件的預設顯示方式。2 浮動元素 float 會被移出標準流，但是沒有脫離檔案流。3 float開始之初是為了實現文字環繞。將塊顯示標記左右排列的時候使用浮動屬性。aa,bb,cc bb cc style clear屬性 cc 多學...
浮動的影響與清除浮動
影響1 div1 div2 div3,要實現dev1 div2 在第一排顯示，div3另起一行？方法 給div1 div2加浮動，1和2會脫離正常流，因為div3屬於正常流會上到第一排，並且被1和2覆蓋 就是為什麼要清除浮動，消除浮動影響 方法1 加乙個空div，clearfix 在div3前加乙個...
分析浮動及清除浮動影響
浮動，顧名思義，就是使文字內容浮起來和動起來，浮指的是 脫離文件流，動指的是 向設定的方向移動。脫離文件流將會導致文件內容高度等不會被常規計算，會造成常見的文字覆蓋 高度塌陷等問題影響布局效果，例如 常規的有以下幾種 1 設定clear both 不允許兩邊有浮動現象，在浮動元素後的非浮動元素中設定...