什麼是BFC？

塊級格式化上下文（Block formatting context）是CSS對於一個頁面進行視覺化渲染時產生的區域，在這個區域中會產生被渲染的盒子模型、以及相互影響的浮動元素。

簡單來說，就是BFC就是一種屬性，影響著元素的定位，以及兄弟元素之間的相互影響。

如何觸發BFC？

---根元素，即document就是一個BFC

---float屬性的元素（除了none）

---定位的元素（absolute 或者fixed）

---inline-block的元素

---table-cell或table-caption

---overflow屬性的元素（除了visible）

---flex 或者inline-flex

BFC有什麼作用？

--BFC 會阻止外邊距摺疊

在一個巢狀的塊級元素上設定外邊距，父元素的外邊距就會和子元素的外邊距發生疊加。

<div class ="parent"><div class="child" style="margin-top:20px;height:30px;background:#eee"></div></div>

但是如果觸發了BFC，就會阻止外邊距疊加，如通過設定overflow:hidden來觸發父元素的BFC。

<div class ="parent" style="overflow:hidden;"><div class="child" style="margin-top:20px;height:30px;"></div></div>
 

--BFC 可以阻止元素被浮動元素覆蓋