1. 何為BFC?
文章：https://juejin.im/post/5909db2fda2f60005d2093db#heading-8
BFC概括：可以在心中記住這麼一個概念———所謂的BFC就是css布局的一個概念，是一塊區域，一個環境。
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，隻有Block-level box參與， 它規定了内部的Block-level Box如何布局，并且與這個區域外部毫不相幹。
FC是formatting context的首字母縮寫，直譯過來是格式化上下文，它是頁面中的一塊渲染區域，有一套渲染規則，決定了其子元素如何布局，以及和其他元素之間的關系和作用。
常見的FC有
BFC
、
IFC
（行級格式化上下文），還有
GFC
（網格布局格式化上下文）和
FFC
（自适應格式化上下文），這裡就不再展開了。
2. 觸發BFC的方式
滿足下列條件之一就可觸發BFC
- 根元素，即HTML元素
- float的值不為none
- overflow的值不為visible
- display的值為inline-block、table-cell、table-caption
- position的值為absolute或fixed
3. 布局規則
- 内部的Box會在垂直方向，一個接一個地放置。
- Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
- 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
- BFC的區域不會與float box重疊。
- BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素。反之也如此。
4. BFC作用
- 自适應兩欄布局
- 可以阻止元素被浮動元素覆寫
- 可以包含浮動元素——清除内部浮動
- 分屬于不同的BFC時可以阻止margin重疊
5. BFC解決margin問題
使用margin存在兩種問題，一種是穿透問題，一種是折疊問題。
5.1 穿透問題
穿透問題即為子級元素的垂直方向margin會穿透父級元素，導緻父級元素發生位移，如下：
<div class="wrapper">
<div class="inner"></div>
</div>
.wrapper {
width: 200px;
height: 200px;
background-color: pink;
}
.inner{
margin-top: 50px;
}
5.2 margin折疊問題
margin折疊問題即為同屬一個BFC中的垂直元素的垂直margin值在頁面計算時發生了折疊而并不會累加
<div class="wrapper"></div>
<div class="wrapper"></div>
.wrapper {
width: 200px;
height: 200px;
background-color: pink;
margin: 20px 0;
}
5.3 兩種問題應該如何解決
5.3.1 解決margin溢出
解決margin穿透問題可以使用BFC的特性來将父級元素設定為一個獨立的BFC，子級元素的margin值就不會溢出父級，而是将父級作為一個獨立區域去計算margin值，我們這裡用
overflow: hidden
來觸發父級的BFC：
<div class="wrapper">
<div class="inner"></div>
</div>
.wrapper {
width: 200px;
height: 200px;
background-color: pink;
overflow: hidden;
}
.inner{
margin-top: 50px;
}
5.3.2 解決margin重疊
網上很多文章都說可以使用BFC特性來解決margin折疊其實是錯誤的，如果我們用
overflow: hidden
将兩個div設定為不同的兩個BFC區域，那麼我們會發現該重疊的還是會重疊。
查閱相關資料顯示隻有以下一種方式可以使元素上下margin不折疊：
浮動元素、inline-block 元素、絕對定位元素的 margin 不會和垂直方向上其他元素的 margin 折疊（注意這裡指的是上下相鄰的元素）
作者：丁小倪 連結：https://www.zhihu.com/question/19823139/answer/13610574 來源：知乎
之是以很多文章生成BFC可以解決垂直margin重疊的問題，是因為浮動元素、inline-block 元素、絕對定位元素都在觸發了BFC的同時解決了重疊問題。也就是說可以解決垂直margin重疊問題的方法都可以讓元素具有BFC特性，但是讓元素具有BFC特性不一定能夠解決垂直margin重疊的問題。
是以如果我們需要解決margin重疊問題，那就将元素設定為浮動元素，或者将其設定為 inline-block 元素，或者使用絕對定位，但這些都會對元素的樣式産生副作用，我們采用将元素設定為 inline-block 元素的方法來示範如何解決這一問題（注意
inline-block
元素對空格敏感，會導緻兩個div之間出現空隙，具體的解決方法看：https://segmentfault.com/a/1190000010934928 ）：
<div class="wrapper"></div>
<div class="wrapper"></div>
.wrapper {
width: 200px;
height: 200px;
background-color: pink;
margin: 20px 0;
display: inline-block;
width: 100%;
}
其實如果利用BFC特性也能實作去掉上下margin的效果，隻不過原理上還是利用BFC阻止margin溢出，我們可以将兩個div套上一個BFC的外殼，這樣兩個BFC的内部元素就不會互相影響了：
作者：陳厚毅 連結：https://www.zhihu.com/question/19823139/answer/50075651 來源：知乎