前言：
在非ie瀏覽器（如firefox）下，當容器的高度為auto，且容器的內容中有浮動（float為left或right）的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影響（甚至破壞）布局的現象，這個現象叫浮動溢位。為了防止這個現象的出現而進行的css處理，就叫css清除浮動。
清除浮動主要是為了解決父元素因為子級元素浮動引起的內部高度塌陷的問題。
為什麼會使用浮動？
一開始出現浮動只是為了解決文字環繞問題，但最後是為了解決幾個塊級元素併排顯示問題，雖然可以使用定義塊級元素的display為inline-block（這種方式也不會出現父級元素坍塌問題）但是這種方式不能控制元素的位置而是預設從左到右，所以要實現元素是居左還是居右使用浮動更方便。但是使用了float之後不清除浮動就會出現父級高度塌陷問題。
例項：
html**基本**
doctype
html
>
lang
="en"
>
>
charset
="utf-8"
>
>
清除浮動title
>
>
#parent
#child
style
>
head
>
>
"parent"
>
"child"
>
div>
div>
body
>
html
>
效果圖-----已清除浮動
當為子元素設定了浮動，如果不清除浮動，那麼父元素將會出現高度塌陷的現象。所以當我們設定了浮動後，就要解決浮動帶來的影響。下面就要我們介紹幾種清除浮動的方法！
方法一：額外標籤法
給誰清除浮動，就在其後額外新增乙個空白標籤 ，給其設定clear：both。
優點：通俗易懂，書寫方便。
缺點：新增許多無意義的標籤，結構化比較差。
clear：both：本質就是閉合浮動， 就是讓父盒子閉合出口和入口，不讓子盒子出來 。
css樣式
#clear
"parent"
>
"child"
>
div>
"clear"
>
div>
div>
優點：**簡潔
缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢位的元素。
css樣式
#parent
缺點：ie6-7不支援偽元素：after，使用zoom:1觸發haslayout。
css樣式
#parent:after
#parent
缺點：用zoom:1觸發haslayout.
css樣式
#parent:after,#parent:before
#parent:after
#parent
優點: 簡單粗暴直接有效，清除了浮動帶來的影響。
前端 清除浮動 五種方法
box1,box2,box3 box1 box2 box3 class box1 div class box2 div style clear both div class box3 div body 在最後乙個浮動元素後面增加 bigbox box1 box2 box3 class bigbox ...
關於清除浮動的五種方法
清除浮動的本質 為了解決父級元素印子級浮動引起內部高度為0的問題。clear 方式2 父級新增overflow屬性方法 father優點 簡捷。缺點 內容增多時容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素。方法3 為父元素新增after偽元素清除浮動 clearfix after c...
清除浮動的八種方法
清除浮動是每乙個 web前台設計師必須掌握的機能。css清除浮動大全，共8種方法。浮動會使當前標籤產生向上浮的效果，同時會影響到前後標籤 父級標籤的位置及 width height 屬性。而且同樣的 在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了。解決浮動引起的問題有多種方法，但有些方法...