；（
? ? ? 如果有幸，被別人看到了，發現有誤的地方，還請批評指正！
）（自己回憶，給自己看）；
先說說什么是 BFC。
先來看看官方一點的解釋
Block Formatting Context 塊級格式化上下文。通俗的說也就是一個獨立的塊級渲染區域，該區域有一套自己的的渲染機制來約束塊級盒子的布局，并且與該區域外面的其他區域布局無關。（沒錯，當我第一眼看到別人這么說這么寫的時候，我也是一臉懵逼，似懂非懂。）
我自己的理解
如上所說，創建了BFC的元素，就是一個獨立的盒子，這個獨立的區域內的盒子怎么布局，是不會影響區域以外的部分，反過來也一樣，外面的元素布局，不會影響這個獨立區域內部的元素布局。并且，這個獨立的區域，依然屬于文檔中的普通文檔流。打個比方（我也不知道恰不恰當），大的文檔流就是一個國家，由國家的法律法規約束，我們的家庭是在國家內的一個小家，我們家里有自己的一套規則。在不違反法律法規的原則下，我們想干什么，想吃什么對國家不會有影響。反過來，也一樣。
BFC的特性
01，BFC會阻止外邊距疊加：一般情況，兩個相鄰的塊級框，它們之間的垂直方向的外邊距會發生疊加。 如果這兩個相鄰的塊框不屬于同一個BFC就不會疊加！
02，BFC不會重疊浮動的元素：一個BFC的邊框不能和它里面的元素的margin重疊。也就是說瀏覽器將會給BFC創建隱式的外邊距來阻止它和浮動元素的外邊距的疊加。當給一個挨著浮動的BFC添加負得外邊距不會起作用！！！
BFC的觸發條件
01，float除了none以外的值
02，display：inline-block、table-cell、table-caption
03，overflow：hidden
04，position：absolute，fixed
說了BFC，隨之而來的就是清除浮動
我的理解是，清除浮動，實際上是清除浮動所帶來的影響。
清除浮動的原理，清除浮動的原理其實就是讓浮動這塊的元素形成BFC，就上面的例子，如果有辦法讓父元素包住子元素，那么這個區域就是BFC了，就好進行布局管理了，而這個方法就是清除浮動。
清除浮動的方法大致有這么幾種
1），添加額外的標簽（原理是觸發BFC）：此方法的哲學是在某個區域內，浮動元素脫離了文檔流，在浮動元素下面添加一個div標簽，設置clear：both屬性。此方法，通俗易懂，容易掌握。但是，頁面中此方法用得多了，就會出現很多無意義的空標簽，這也違背了結構與表現分離的原則，而且后期維護肯定是噩夢般的存在。所以是堅決不推薦的。
2），這是一個傻瓜式的本辦法，就是給父元素也設置浮動，但是雖然不存在語義化的問題，但又使得父元素與之相鄰的元素的布局受到影響，如果在一直往上設置浮動，恐怕一直設置到body這也不顯示。所以肯定也是堅決不推薦的。
3），給父元素設置overflow：hidden（原理是觸發BFC）：此方法不存在語義化的問題，代碼量極少。但是需要注意一個問題，就是內容增多的時候不會自動換行導致溢出的內容被隱藏掉。
4），給父元素設置display：table（原理是觸發BFC）：此方法會改變設置改屬性的盒子的盒模型。比如：父盒子沒有寬度，沒有高度，塊級元素默認占滿一行，設置此屬性過后，默認寬度會發生改變。
5），使用偽元素（注意不是偽類）：.clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both;}.clearfix{*zoom:1;}只需注意謹慎使用，如使用不當會造成代碼量增加。
此方法 的原理：
1) display:block 使生成的元素以塊級元素顯示,占滿剩余空間;
2) height:0 避免生成內容破壞原有布局的高度。
3) visibility:hidden 使生成的內容不可見，并允許可能被生成內容蓋住的內容可以進行點擊和交互;
4）通過 content:”.”生成內容作為最后一個元素，至于content里面是點還是其他都是可以的，有些版本可能content 里面內容為空,不推薦這樣做的,firefox直到7.0 content:”” 仍然會產生額外的空隙；(bug！！)
5）zoom：1 觸發IE hasLayout。（IE6，7不支持偽元素故添加此屬性閉合浮動）
順便說一下解決父盒子高度塌陷的問題
如上面所說道的方法就可以用，比如給父盒子添加overflow：hidden，display：table，偽類清除浮動。還有就是添加空元素（所謂的隔墻法），當然還有一種，就是給父盒子設置高度。用哪一種，見仁見智。
