浮動(dòng)是什么：
浮動(dòng)：浮動(dòng)元素會(huì)脫離文檔流并向左右移動(dòng)，直到碰到父元素或者另一個(gè)浮動(dòng)元素。

浮動(dòng)元素不屬于文檔中的普通流，當(dāng)一個(gè)元素浮動(dòng)之后，不會(huì)影響到塊級(jí)元素的布局而只會(huì)影響內(nèi)聯(lián)元素（通常是文本）的排列，文檔中的普通流就會(huì)表現(xiàn)的和浮動(dòng)元素不存在一樣，當(dāng)浮動(dòng)元素高度超出包含框的時(shí)候，也就會(huì)出現(xiàn)父級(jí)元素不會(huì)自動(dòng)升高來(lái)閉合元素（高度塌陷）。

正是因?yàn)楦?dòng)的這種特性，導(dǎo)致本屬于普通流中的元素浮動(dòng)之后，包含框內(nèi)部由于不存在其他普通流元素了，也就表現(xiàn)出高度為0（高度塌陷）。在實(shí)際布局中，往往這并不是我們所希望的，所以需要閉合浮動(dòng)元素，使其包含框表現(xiàn)出正常的高度。

清除浮動(dòng)的原因：
1 影響別的元素的布局
2 造成高度塌陷

清除浮動(dòng)的方法
方法一(差)：添加額外標(biāo)簽
使用帶有clear屬性的空元素

<div class="container">
  <div class="floatLeft"></div>
  <div class="floatRight"></div>
  <div class="clear"></div>
</div>

.clear{clear:both;}

優(yōu)點(diǎn)：通俗易懂，容易掌握
缺點(diǎn)：將添加很多無(wú)意義的空標(biāo)簽，有違結(jié)構(gòu)與表現(xiàn)的分離，后期維護(hù)會(huì)是噩夢(mèng)。

方法二（差）：使用br標(biāo)簽及自身html屬性
這個(gè)方法有些小眾，br 有clear="all | left | right | none"屬性

<div class="container">
  <div class="floatLeft"></div>
  <div class="floatRight"></div>
  <br clear="all">
</div>

優(yōu)點(diǎn)：比空標(biāo)簽方式語(yǔ)義強(qiáng)，代碼量較少
缺點(diǎn)：同樣有違結(jié)構(gòu)與表現(xiàn)的分離，不推薦使用

方法三（差）：父元素設(shè)置overflow 屬性
通過(guò)設(shè)置父元素overflow值設(shè)置為hidden;在IE6中還需要出發(fā)hasLayout,例如zoom:1;

<div class="container">
  <div class="floatLeft"></div>
  <div class="floatRight"></div>
</div>

.container{
  overflow:hidden;
  *zoom:1;
}

優(yōu)點(diǎn)：不存在結(jié)構(gòu)和語(yǔ)義化問(wèn)題，代碼量較少
缺點(diǎn)：overflow：hidden; 可能會(huì)隱藏掉不想被隱藏掉的東西。

方法四（差）：父元素設(shè)置display: table

<div class="container">
  <div class="floatLeft"></div>
  <div class="floatRight"></div>
</div>

.container{
  display:table;
}

優(yōu)點(diǎn)：結(jié)構(gòu)語(yǔ)義化完全正確，代碼量極少
缺點(diǎn)：盒模型屬性已經(jīng)改變，由此造成了一系列問(wèn)題

方法五（可）：使用：after偽元素
:after 偽元素在元素之后添加內(nèi)容
IE6-7不支持:after, 使用zoom:1觸發(fā)hasLayout

<div class="container clearfix">
  <div class="floatLeft"></div>
  <div class="floatRight"></div>
  <div class="clear"></div>
</div>

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

1. display:block 使生成的元素以塊級(jí)元素顯示，占滿剩余空間
   2）height:0 避免生成內(nèi)容破壞原有布局的高度
   3）visibility:hidden 使生成的內(nèi)容不可見(jiàn)，并允許可能被生成內(nèi)容蓋住的內(nèi)容可以進(jìn)行點(diǎn)擊和交；
   4）content:"" 生成內(nèi)容作為最后一個(gè)元素，至于content里面是點(diǎn)還是其他都可以
   5）zoom:1 觸發(fā)IE hasLayout
   分析：除了clear:both用來(lái)閉合浮動(dòng)，其他代碼無(wú)非都是為了隱藏掉content生成的內(nèi)容，這也就是其他版本的閉合浮動(dòng)為什么會(huì)有font-size:0, line-height: 0;

優(yōu)化升級(jí)版本（可）：

.clearfix:before, .clearfix:after{
  content: "";
  display:table;
}
.clearfix:after{
  clearfix:both;
}
.clearfix{
  *zoom:1;  兼容IE6,7
}

清除浮動(dòng)的原理
以上方法，分為2類(lèi)：
第一類(lèi)：在浮動(dòng)元素末尾添加一個(gè)空元素（一 二 五）
第二類(lèi)：設(shè)置父元素overflow 或者 display:table 來(lái)閉合浮動(dòng) （三 四）

為什么設(shè)置父元素overflow 或者 display:table 可以閉合浮動(dòng)？
其原理：Block formatting contexts(塊級(jí)格式化上下文)，簡(jiǎn)稱(chēng)BFC
如何觸發(fā)BFC:
1 float 除了none以外的值
2 overflow 除了visible 以外的值（hidden，auto，scroll ）
3 display (table-cell，table-caption，inline-block)
4 position（absolute，fixed）
5 fieldset元素

需要注意的是，display:table 本身并不會(huì)創(chuàng)建BFC，但是它會(huì)產(chǎn)生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以創(chuàng)建新的BFC，換句話說(shuō)，觸發(fā)塊級(jí)格式化上下文的是匿名框，而不是display:table。所以通過(guò)display:table和display:table-cell創(chuàng)建的BFC效果是不一樣的。fieldset 元素在www.w3.org里目前沒(méi)有任何有關(guān)這個(gè)觸發(fā)行為的信息，直到HTML5標(biāo)準(zhǔn)里才出現(xiàn)。有些瀏覽器bugs（Webkit，Mozilla）提到過(guò)這個(gè)觸發(fā)行為，但是沒(méi)有任何官方聲明。實(shí)際上，即使fieldset在大多數(shù)的瀏覽器上都能創(chuàng)建新的塊級(jí)格式化上下文，開(kāi)發(fā)者也不應(yīng)該把這當(dāng)做是理所當(dāng)然的。CSS 2.1沒(méi)有定義哪種屬性適用于表單控件，也沒(méi)有定義如何使用CSS來(lái)給它們添加樣式。用戶代理可能會(huì)給這些屬性應(yīng)用CSS屬性，建議開(kāi)發(fā)者們把這種支持當(dāng)做實(shí)驗(yàn)性質(zhì)的，更高版本的CSS可能會(huì)進(jìn)一步規(guī)范這個(gè)。

BFC的特性：
塊級(jí)格式化上下文會(huì)阻止外邊距疊加當(dāng)兩個(gè)相鄰的塊框在同一個(gè)塊級(jí)格式化上下文中時(shí)，它們之間垂直方向的外邊距會(huì)發(fā)生疊加。換句話說(shuō)，如果這兩個(gè)相鄰的塊框不屬于同一個(gè)塊級(jí)格式化上下文，那么它們的外邊距就不會(huì)疊加。
塊級(jí)格式化上下文不會(huì)重疊浮動(dòng)元素根據(jù)規(guī)定，一個(gè)塊級(jí)格式化上下文的邊框不能和它里面的元素的外邊距重疊。這就意味著瀏覽器將會(huì)給塊級(jí)格式化上下文創(chuàng)建隱式的外邊距來(lái)阻止它和浮動(dòng)元素的外邊距疊加。由于這個(gè)原因，當(dāng)給一個(gè)挨著浮動(dòng)的塊級(jí)格式化上下文添加負(fù)的外邊距時(shí)將會(huì)不起作用（Webkit和IE6在這點(diǎn)上有一個(gè)問(wèn)題——可以看這個(gè)測(cè)試用例）。
塊級(jí)格式化上下文通常可以包含浮動(dòng)詳見(jiàn)： W3C CSS2.1 - 10.6.7 ‘Auto’ heights for block formatting context roots

通俗地來(lái)說(shuō)：創(chuàng)建了 BFC的元素就是一個(gè)獨(dú)立的盒子，里面的子元素不會(huì)在布局上影響外面的元素，反之亦然，同時(shí)BFC任然屬于文檔中的普通流。overflow:hidden或者auto可以閉合浮動(dòng)，就是因?yàn)楦冈貏?chuàng)建了新的BFC。