清除浮動的八種方法

浮動是什麼？

浮動元素會脫離文件流進行左浮或者右浮，直到碰到父級元素或者其他的浮動元素。

為什麼清除浮動：浮動會導致父元素高度坍塌，因為浮動脫離文件流，浮動以後不佔文件流的位置，撐開的父元素高度肯定會坍塌。

清除浮動的八種方法：

1、父級div給出固定的高度。手動定義height，這樣就解決了父級元素獲取不到高度的問題。

優點：**量少，簡單容易掌握。

缺點：只適合高度固定的布局，如果高度和父級div不同會出現問題。

2、overflow，設定overflow：hidden。

優點：**少，瀏覽器支援。

缺點：會把超出的部分隱藏起來，而且不能配合position使用

3、額外標籤，新增乙個新的標籤，如div，或者br，並且設定標籤的屬性clear：both；清除浮動，讓父級能自動獲得高度。

優點：**少，瀏覽器支援，不會各種問題。

缺點：會有很多空的div或者br。

4、使用單偽類after和zoom，使用方法：

.clearfloat:after

.clearfloat

優點：瀏覽器支援好，大型的瀏覽器都在使用，建議使用。

缺點：**多，需要after和zoom都要使用才能相容主流的瀏覽器。

5、雙偽類清除浮動。使用方法：

.clearfloat:before,.clearfloatafter

.clearfloat 

缺點：不嚴謹不建議使用

6、父級div跟著浮動，所有**一起浮動就會形成乙個整體，

缺點：會產生新的問題，不建議使用。

7、父級定義display：table；將div屬性變成的**。

缺點：產生新的問題，而且影響布局。

8、overflow：auto；需要設定width，不設定height，瀏覽器會自動檢測浮動區的高度。

缺點：容易生成滾動條。

清除浮動的八種方法

清除浮動是每乙個 web前台設計師必須掌握的機能。css清除浮動大全，共8種方法。浮動會使當前標籤產生向上浮的效果，同時會影響到前後標籤 父級標籤的位置及 width height 屬性。而且同樣的 在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了。解決浮動引起的問題有多種方法，但有些方法...

清除浮動的9種方法

1 父級div定義heigh 原理 父級div手動定義height，就解決了父級div無法自動獲取到高度的問題 優點 簡單，少，容易掌握 缺點 只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題 建議 不推薦使用，只建議高度固定的布局時使用 2 結尾處加空div標籤cl...

CSS清除浮動5種方法

清除浮動是每乙個 web前台設計師必須掌握的機能。css清除浮動大全，共8種方法。浮動會使當前標籤產生向上浮的效果，同時會影響到前後標籤 父級標籤的位置及 width height 屬性。而且同樣的 在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了。解決浮動引起的問題有多種方法，但有些方法...