[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