[TOC] # BFC 是什么？ BFC（Block Format Context）塊格式化上下文，即一個設置了 float 或者絕對 / 固定定位（fixed/absolute）的 inline-block 元素，table-cell 元素以及設置了 overflow 屬性的 block 元素就會新建一個塊級格式化上下文區域。在一個 BFC 中，元素和元素之間從上到下排列，他們的外邊距會進行合并。 ## 關于如何生成 BFC 1. float 為 left，right。 2. overflow 為 hidden，auto，scroll。 3. display 為 table-cell，table-caption，inline-block。 4. position 為 absolute，fixed。 總結一下就是，設置了上述屬性（浮動，絕對定位，overflow 等）的元素，他們會另外新建一個 BFC，導致他們不會遵守當前所在的 BFC 的規矩，比如外邊距合并等。 # BFC 有什么作用？ > https://www.jianshu.com/p/c9b80c197c21