清除浮動主要是為了解決，父元素因為子級元素浮動引起的內部高度為0的問題
1.如下，我給父盒子設定乙個boder，內部放兩個盒子乙個big 乙個small，未給big和small設定浮動，則他們會預設撐開父盒子
2.當我給內部兩個盒子加上float屬性的時候
頂部深藍色盒子就會頂上來，然後父盒子因為沒設定高度，變成一條線，big和small已經浮動了
總結一下：
當父元素不給高度的時候，
內部元素不浮動時會撐開
而浮動的時候，父元素變成一條線
什麼是clear：both
clear：both：本質就是閉合浮動， 就是讓父盒子閉合出口和入口，不讓子盒子出來
.fahter
.big
.small
.footer
.clear
class
="fahter"
>
class
="big"
>
bigdiv
>
class
="small"
>
smalldiv
>
class
="clear"
>
額外標籤法div
>
div>
class
="footer"
>
div>
如果我們清除了浮動，父元素自動檢測子盒子最高的高度，然後與其同高。
優點：通俗易懂，方便
缺點：新增無意義標籤，語義化差
不建議使用。
2.父級新增overflow屬性（父元素新增overflow:hidden）（不推薦）
通過觸發bfc方式，實現清除浮動
.fahter
缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢位的元素
不推薦使用
3.使用after偽元素清除浮動（推薦使用）
.clearfix:after
.clearfix
class
="fahter clearfix"
>
class
="big"
>
bigdiv
>
class
="small"
>
smalldiv
>
div>
class
="footer"
>
div>
缺點：ie6-7不支援偽元素：after，使用zoom:1觸發haslayout.
推薦使用
4.使用before和after雙偽元素清除浮動
.clearfix:after,.clearfix:before
.clearfix:after
.clearfix
class
="fahter clearfix"
>
class
="big"
>
bigdiv
>
class
="small"
>
smalldiv
>
div>
class
="footer"
>
div>
CSS 如何清除浮動
眾所周知，平時在寫html 時，難免少不了使用float樣式，這樣一來，假使您沒有清除浮動，那麼有浮動元素的父元素容器將元素將無法自動撐開。換句簡單好理解的話來說，假如你在寫code時，其中div.a 這個就是說頁面中有乙個div，並且把其命名為class a 中包含了兩個或多個子元素div.b,d...
css如何清除浮動（四）
通過隔牆法，我們可以很方便的清楚浮動。下面我們再來介紹一種清楚浮動的方法 內牆法.仍然是同樣的例子。內牆法和隔牆法很相似，區別在於將這堵牆dis放在div1裡面。通過設定這堵牆的clear both來清除浮動 同樣設定該div的height 10px,使div1與div2之間出現間距。執行結果 那麼...
CSS清除浮動 清除float浮動
css清除浮動方法集合 一般浮動是什麼情況呢？一般是乙個盒子裡使用了css float浮動屬性，導致父級物件盒子不能被撐開，這樣css float浮動就產生了。浮動產生樣式效果截圖 本來兩個黑色物件盒子是在紅色盒子內，因為對兩個黑色盒子使用了float浮動，所以兩個黑色盒子產生了浮動，導致紅色盒子不...