在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了，下面總結
8種清除浮動的方法，測試已通過
ie chrome firefox opera
，需要的朋友可以參考下
清除浮動是每乙個
web前台設計師必須掌握的機能。
css清除浮動大全，共
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
清除浮動的方式
現在許多 都是採用浮動的方式來編寫網頁，所以清楚如何清除浮動就顯得尤為重要。下面介紹清除浮動的六種方法。給第乙個盒子設定高度 標準流的元素會撐起父元素的高度，但是浮動流的元素是不會撐起父元素的高度的。第乙個盒子的元素全部浮動，所以導致第乙個盒子高度為0，也就是說body中第乙個元素為空，這樣第二個盒...
清除浮動的方式
清除浮動的方式常用的有三種 clearfix，clear both，overflow hidden clearfix是萬金油版本 寫法一 clearfix after寫法二 clearfix before,clearfix after clearfix after clearfixclear bot...
清除浮動的方式
首先我們需要明確乙個定義，什麼是浮動？元素使用float屬性之後，會脫離文件流，父級元素因此失去支撐 若父級元素未設定高度 下面的元素會忽略父級元素布局,為了不影響頁面布局效果，我們需要清除浮動。清除浮動的常用方式有以下三種 1.浮動元素的父級元素 parent 2.浮動元素的父級元素後新增偽元素 ...