理解為何需要清除浮動及清除浮動的方法
初衷：寫這篇文章是博主之前參加百度面試，被問到清楚浮動的方法，答了幾種方法當提到overflow：hidden之後被追問什麼是bfc，隨即啞火。感嘆自己對知識的深度著實不夠。所以打算寫一篇文章作為學習筆記吧。
一、為何要清除浮動
［主要涉及關鍵詞：文件流、高度塌陷。］
作為一個前端er肯定會要用到float屬性。浮動的框可以左右移動，直到遇到另一個浮動框或者遇到它外邊緣的包含框。浮動框不屬於文件流中的普通流，當元素浮動之後，不會影響塊級元素的佈局，只會影響內聯元素佈局。此時文件流中的普通流就會表現得該浮動框不存在一樣的佈局模式。當包含框的高度小於浮動框的時候，此時就會出現“高度塌陷”
（1）該圖是最初的圖片樣式，未設定浮動。藍框是寫了一個.container類作為包含框。包含三張圖片。
<div class="pic-box"> <div class="container"> <img class="pic-1" src="images/system_correct.jpg"> <img class="pic-2" src="images/system_practice.jpg"> <img class="pic-3" src="images/system_learn.jpg"> </div> </div>
（2）其實要看到塌陷效果很簡單。根據我上面所說，可以看到img3的寬高都大於前兩張圖。所以我們假設把img3設為 float：left；那麼此時img3就會脫離原來的文件流。現在我們來看看給img3設左浮動後的效果
噹噹噹！可以看到<img3>成功脫離了 .container 類，即脫離了文件流。產生塌陷。博主此刻的心情是這樣的：
(這裡也印證前面所說當浮動塊高度大於包含塊寬度會產生塌陷的理論。)
二、如何清除浮動
關於清除浮動網上有很多種方法，這裡博主只給出一種我常用也是目前最主流的方法。即用 after偽元素清除浮動。其實關於清除浮動的程式碼主要就是圍繞clear:both和如何隱藏content。文末我會貼出一個包含多種清除浮動方法的文章，大家可以根據喜好選擇。
（1） 通過加入.clearfix:afer類清除浮動
.clearfix:after{
display: block;
content:'';
clear: both;
height:0;
}
噹噹噹！到這裡我們成功將<img3>放回文件流。且不會影響後續塊級元素的佈局。
但是處女座的博主心裡還不是很滿意。此刻內心如圖：
因為細心的朋友可以發現，其實我們理想的清除浮動後的狀態，應該是這個樣子的：
但是這個問題已經超出了這篇文章討論的範圍，且博主解決這個問題的方法很土，就不貼出自己的程式碼了。以後有更好的方法會再更博。總之，我們 已經成功解決了如何清除浮動及為什麼要清除浮動兩個問題。
三、什麼是BFC及如果利用BFC包含浮動
（1）什麼是BFC
這裡直接po出官方給的解釋：
(2) 如何用BFC清除浮動
粗暴的總結就是讓浮動塊包含在同一個BFC中加同時（也可以理解為包含塊加屬性overflow:hidden）。
這裡貼出幾篇參考文章：
（1）http://www.w3cplus.com/css/understanding-block-formatting-contexts-in-css.html 將BFC解釋得十分清除
（2）http://www.jb51.net/css/67471.html 提供了多種清除浮動方法也解釋了浮動原理，有一些長。
希望大家對我的文章不足之處提出意見，共同討論進步。