為什麼要清除浮動？？

首先理解浮動框：

浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣。
浮動框不屬於文件中的普通流，當一個元素浮動之後，不會影響到塊級框的佈局而只會影響內聯框（通常是文字）的排列，
文件中的普通流就會表現得和浮動框不存在一樣，當浮動框高度超出包含框的時候，也就會出現包含框不會自動伸高來閉合浮動元素（“高度塌陷”現象）。
顧名思義，就是漂浮於普通流之上，像浮雲一樣，但是隻能左右浮動。

導致了高度塌陷

為浮動的這種特性，導致本屬於普通流中的元素浮動之後，包含框內部由於不存在其他普通流元素了，也就表現出高度為0（高度塌陷）。在實際佈局中，往往這並不是我們所希望的，所以需要閉合浮動元素，使其包含框表現出正常的高度。

解決方法

1)新增額外標籤

<div class="wrap" id="float1">
    <h2>1）新增額外標籤</h2>
    <div class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    <div style="clear:both;"></div>
    </div>
<div class="footer"
 
>.footer</div>

優點：通俗易懂，容易掌握
缺點：可以想象通過此方法，會新增多少無意義的空標籤，有違結構與表現的分離，在後期維護中將是噩夢，這是堅決不能忍受的

2)父元素設定 overflow：hidden

通過設定父元素overflow值設定為hidden；在IE6中還需要觸發 hasLayout ，例如 zoom：1；

<div class="wrap" id="float3" style="overflow:hidden; *zoom:1;">
    <h2>3)父元素設定 overflow </h2>
    <div
 
 class="main left">.main{float:left;}</div>
    <div class="side left">.side{float:right;}</div>
    </div>
<div class="footer">.footer</div>

實質是觸發BFC
優點：不存在結構和語義化問題，程式碼量極少
缺點：內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素；

3) 父元素設定浮動

優點：不存在結構和語義化的問題，程式碼量少
缺點: 使得與父元素相鄰的元素的佈局會受到影響，不可能一直浮動到body，不推薦。。

4) 父元素設定 display:table

也是觸發了BFC
優點：結構語義化正確，程式碼少
缺點：盒模型屬性已經改變。

5)使用:after偽元素

需要注意的是 :after是偽元素（Pseudo-Element），
不是偽類
不過csser要嚴謹一點，這是一種態度。

 .clearfix:after {
     content:"."; 
     display:block; height:0; visibility:hidden; clear:both; 
     }
.clearfix { *zoom:1; }

優點：結構和語義完全正確，程式碼量居中
缺點：複用方式不當會造成程式碼量增加

實際原理(後面解釋BFC)

1) display:block 使生成的元素以塊級元素顯示,佔滿剩餘空間;
2) height:0 避免生成內容破壞原有佈局的高度。
3) visibility:hidden 使生成的內容不可見，並允許可能被生成內容蓋住的內容可以進行點選和互動;
4）通過 content:”.”生成內容作為最後一個元素，至於content裡面是點還是其他都是可以的，有些版本可能content 裡面內容為空,不推薦這樣做的,firefox直到7.0 content:”” 仍然會產生額外的空隙；(bug！！)
5）zoom：1 觸發IE hasLayout。

總結原理

原理其一，通過在浮動元素的末尾新增一個空元素，
設定clear:both，after偽元素也是通過content**在元素後面生成了內容為一個點(或” “)的塊級元素**；
塊級元素自然就能讓行內元素下沉了，因為
一般受影響的是行內元素~或者父元素高度塌陷

其二,通過設定父元素overflow或display:table
原理就是觸發BFC(Block formatting contexts)
塊級格式化上下文！！！！

BFC

BFC的特性

1. BFC會阻止外邊距疊加
   一般情況，兩個相鄰的塊級框，它們之間的垂直方向的外邊距會發生疊加。 如果這兩個相鄰的塊框不屬於同一個BFC就不會疊加！
   2.BFC不會重疊浮動元素
   一個BFC的邊框不能和它裡面的元素的margin重疊。
   這意味著瀏覽器將會給BFC建立隱式的外邊距來阻止它和浮動元素的外邊距的疊加。
   當給一個挨著浮動的BFC新增負得外邊距不會起作用！
   
   1. BFC通常可以包含浮動

觸發BFC的條件

• float除了none以外的值
• overflow除了visible之外的值
• display(table-cell table-caption,inline-block)
• position(absolute,fixed)

display:table 本身並不會建立BFC，但是它會產生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以建立新的BFC，換句話說，觸發塊級格式化上下文的是匿名框，而不是display:table。所以通過display:table和display:table-cell建立的BFC效果是不一樣的。

解釋

通俗地來說：建立了 BFC的元素就是一個獨立的盒子，裡面的子元素不會在佈局上影響外面的元素，反之亦然，同時BFC依然屬於文件中的普通流。
設定了overflow:hidden可以清除浮動就是
因為父元素建立了新的BFC！
所以父元素和子元素是兩個BFC，因為設定了float也是一個BFC

綜上所述：

在支援BFC的瀏覽器（IE8+，firefox，chrome，safari）通過建立新的BFC閉合浮動；

在不支援 BFC的瀏覽器 （IE6-7），通過觸發 hasLayout 閉合浮動。(不是很瞭解了)