；（
? ? ? 如果有幸淫半，被別人看到了，發(fā)現(xiàn)有誤的地方科吭，還請批評指正！
）（自己回憶对人，給自己看）；
先說說什么是 BFC牺弄。
先來看看官方一點的解釋
Block Formatting Context 塊級格式化上下文。通俗的說也就是一個獨立的塊級渲染區(qū)域猖闪，該區(qū)域有一套自己的的渲染機制來約束塊級盒子的布局，并且與該區(qū)域外面的其他區(qū)域布局無關(guān)培慌。（沒錯，當(dāng)我第一眼看到別人這么說這么寫的時候吵护，我也是一臉懵逼，似懂非懂馅而。）
我自己的理解
如上所說，創(chuàng)建了BFC的元素瓮恭，就是一個獨立的盒子，這個獨立的區(qū)域內(nèi)的盒子怎么布局屯蹦，是不會影響區(qū)域以外的部分，反過來也一樣登澜，外面的元素布局，不會影響這個獨立區(qū)域內(nèi)部的元素布局脑蠕。并且，這個獨立的區(qū)域跪削，依然屬于文檔中的普通文檔流迂求。打個比方（我也不知道恰不恰當(dāng)）晃跺，大的文檔流就是一個國家，由國家的法律法規(guī)約束哼审，我們的家庭是在國家內(nèi)的一個小家孕豹，我們家里有自己的一套規(guī)則。在不違反法律法規(guī)的原則下励背，我們想干什么，想吃什么對國家不會有影響叶眉。反過來，也一樣衅疙。
BFC的特性
01，BFC會阻止外邊距疊加：一般情況饱溢，兩個相鄰的塊級框，它們之間的垂直方向的外邊距會發(fā)生疊加绩郎。 如果這兩個相鄰的塊框不屬于同一個BFC就不會疊加！
02肋杖，BFC不會重疊浮動的元素：一個BFC的邊框不能和它里面的元素的margin重疊。也就是說瀏覽器將會給BFC創(chuàng)建隱式的外邊距來阻止它和浮動元素的外邊距的疊加状植。當(dāng)給一個挨著浮動的BFC添加負得外邊距不會起作用！＝蚧！
BFC的觸發(fā)條件
01洼畅，float除了none以外的值
02，display：inline-block帝簇、table-cell靠益、table-caption
03，overflow：hidden
04胧后，position：absolute，fixed
說了BFC壳快，隨之而來的就是清除浮動
我的理解是，清除浮動眶痰，實際上是清除浮動所帶來的影響。
清除浮動的原理竖伯，清除浮動的原理其實就是讓浮動這塊的元素形成BFC，就上面的例子七婴，如果有辦法讓父元素包住子元素，那么這個區(qū)域就是BFC了打厘，就好進行布局管理了，而這個方法就是清除浮動婚惫。
清除浮動的方法大致有這么幾種
1），添加額外的標(biāo)簽（原理是觸發(fā)BFC）：此方法的哲學(xué)是在某個區(qū)域內(nèi)先舷，浮動元素脫離了文檔流，在浮動元素下面添加一個div標(biāo)簽蒋川，設(shè)置clear：both屬性互躬。此方法，通俗易懂班巩，容易掌握氮兵。但是，頁面中此方法用得多了歹鱼，就會出現(xiàn)很多無意義的空標(biāo)簽，這也違背了結(jié)構(gòu)與表現(xiàn)分離的原則，而且后期維護肯定是噩夢般的存在掺涛。所以是堅決不推薦的。
2）薪缆，這是一個傻瓜式的本辦法，就是給父元素也設(shè)置浮動拣帽，但是雖然不存在語義化的問題，但又使得父元素與之相鄰的元素的布局受到影響减拭，如果在一直往上設(shè)置浮動，恐怕一直設(shè)置到body這也不顯示。所以肯定也是堅決不推薦的茫虽。
3），給父元素設(shè)置overflow：hidden（原理是觸發(fā)BFC）：此方法不存在語義化的問題濒析，代碼量極少。但是需要注意一個問題号杏，就是內(nèi)容增多的時候不會自動換行導(dǎo)致溢出的內(nèi)容被隱藏掉。
4）盾致，給父元素設(shè)置display：table（原理是觸發(fā)BFC）：此方法會改變設(shè)置改屬性的盒子的盒模型。比如：父盒子沒有寬度庭惜，沒有高度，塊級元素默認占滿一行护赊，設(shè)置此屬性過后，默認寬度會發(fā)生改變骏啰。
5）节吮，使用偽元素（注意不是偽類）：.clearfix:after{content:".";display:block;height:0;visibility:hidden;clear:both;}.clearfix{*zoom:1;}只需注意謹慎使用透绩，如使用不當(dāng)會造成代碼量增加。
此方法 的原理：
1) display:block 使生成的元素以塊級元素顯示,占滿剩余空間;
2) height:0 避免生成內(nèi)容破壞原有布局的高度渺贤。
3) visibility:hidden 使生成的內(nèi)容不可見，并允許可能被生成內(nèi)容蓋住的內(nèi)容可以進行點擊和交互;
4）通過 content:”.”生成內(nèi)容作為最后一個元素志鞍，至于content里面是點還是其他都是可以的，有些版本可能content 里面內(nèi)容為空,不推薦這樣做的,firefox直到7.0 content:”” 仍然會產(chǎn)生額外的空隙固棚；(bug！此洲！)
5）zoom：1 觸發(fā)IE hasLayout。（IE6呜师，7不支持偽元素故添加此屬性閉合浮動）
順便說一下解決父盒子高度塌陷的問題
如上面所說道的方法就可以用，比如給父盒子添加overflow：hidden汁汗，display：table，偽類清除浮動知牌。還有就是添加空元素（所謂的隔墻法）祈争，當(dāng)然還有一種菩混，就是給父盒子設(shè)置高度。用哪一種沮峡，見仁見智。
