原文見: https://www.cnblogs.com/libin-1/p/7098468.html 和 http://www.reibang.com/p/acf76871d259
BFC定義
在一個Web頁面的CSS渲染中条辟，塊級格式化上下文 (Block Fromatting Context) 是按照塊級盒子布局的宏胯。W3C對BFC的定義如下：
浮動元素和絕對定位元素，非塊級盒子的塊級容器（例如 inline-blocks, table-cells, 和 table-captions）杭棵，
以及overflow值不為“visiable”的塊級盒子，都會為他們的內(nèi)容創(chuàng)建新的BFC（塊級格式上下文）魂爪。
一個HTML元素要創(chuàng)建BFC先舷，則滿足下列的任意一個或多個條件即可：
1滓侍、float的值不是none。
2捺球、position的值不是static或者relative。
3氮兵、display的值是inline-block歹鱼、table-cell、flex醉冤、table-caption或者inline-flex
4、overflow的值不是visible
BFC是一個獨立的布局環(huán)境蚁阳，其中的元素布局是不受外界的影響，并且在一個BFC中颠悬，塊盒與行盒（行盒由一行中所有的內(nèi)聯(lián)元素所組成）都會垂直的沿著其父元素的邊框排列定血。
BFC的作用
1. 清除內(nèi)部浮動
我們在布局時經(jīng)常會遇到這個問題：對子元素設(shè)置浮動后，父元素會發(fā)生高度塌陷澜沟，也就是父元素的高度變?yōu)?。
解決這個問題茫虽，只需要把把父元素變成一個BFC就行了。常用的辦法是給父元素設(shè)置overflow:hidden正什。
2. 垂直margin合并
在CSS當中号杏，相鄰的兩個盒子的外邊距可以結(jié)合成一個單獨的外邊距婴氮。這種合并外邊距的方式被稱為折疊，并且因而所結(jié)合成的外邊距稱為折疊外邊距荣暮。
折疊的結(jié)果：
兩個相鄰的外邊距都是正數(shù)時旨怠，折疊結(jié)果是它們兩者之間較大的值。
兩個相鄰的外邊距都是負數(shù)時鉴腻，折疊結(jié)果是兩者絕對值的較大值百揭。
兩個外邊距一正一負時，折疊結(jié)果是兩者的相加的和器一。
這個同樣可以利用BFC解決。關(guān)于原理在前文已經(jīng)講過了渺贤。
3. 創(chuàng)建自適應(yīng)兩欄布局
在很多網(wǎng)站中请毛，我們持景埃看到這樣的一種結(jié)構(gòu)方仿，左圖片+右文字的兩欄結(jié)構(gòu)。
