一、BFC概念
FC（Formatting Contexts）即格式化上下文，是W3C CSS2.1規範的一個概念，它是頁面中的一塊渲染區域，有一套渲染規則，決定了其子元素如何佈局以及和其他元素之間的關係和作用
常見的FC有：BFC（塊級格式化上下文）IFC（行級格式化上下文）、GFC（網格佈局格式化上下文）、FFC（自適應格式化上下文）
BFC（Block Formatting Contexts）即塊級格式化上下文，具有BFC特性的元素相當於一個帶有屏蔽罩的容器，容器裏面的元素無論如何佈局都對外邊的元素沒有影響，並且該容器具有一些普通容器沒有的特性。
它可以理解爲某個元素的一個CSS屬性，但又不能被顯式修改，BFC屬性元素對內對外都有一些特性。引用《CSS世界》裏的比喻，BFC容器就像一個結界，具有內部元素不被外部元素影響也不影響外部元素的重要原則，而BFC的特性都是基於此原則展開的。
二、BFC特性
（1）同一個BFC下的元素之間，外邊距發生重疊（防止內元素影響外元素）
（2）BFC容器可以包裹容器內浮動的元素（防止內元素影響外元素）
（3）BFC容器能夠阻止容器內元素被容器外浮動元素的覆蓋（防止外元素影響內元素）
三、BFC觸發條件（滿足條件之一即可觸發）
（1）<html><body>根元素
（2）display屬性設置爲inline-block 、table-cell、table-caption 、flex
（3）float屬性設置除了none以外的left、right、inherit
（4）position屬性設置爲absolute 和 fixed
（5）overflow屬性設置爲除了visible以外的hidden、auto、scroll
四、BFC的作用
（1）自適應兩欄佈局（重要）
（2）阻止元素被浮動元素覆蓋
（3）清除內部浮動，即可以包含浮動元素
父元素中有兩個子元素分別設置左右浮動，左浮動子元素接觸父元素border-box的左邊，右浮動子元素接觸父元素border-box的右邊，且父元素高度塌陷，需要清除浮動來解決高度塌陷問題。觸發父元素的BFC，使兩個子元素處於同一個BFC中達到清除浮動的效果。
（4）阻止margin重疊——分屬於兩個不同的BFC
參考特性１，兩個同一BFC下的子元素之間的margin相互重疊，爲防止這種情況，在其中一個子元素外加一個觸發BFC的div, 這樣兩個子元素分屬於兩個BFC則margin不會重疊。
參考文檔：
https://zhuanlan.zhihu.com/p/25321647
https://juejin.im/post/5909db2fda2f60005d2093db