什么是BFC
首先，你可能需要简单的了解一下什么是 BFC。
W3C在视觉格式化模型中描述了一个 Block formatting contexts 的概念，大致的说法如下：
浮动和绝对定位元素，非块盒的块容器（诸如：inline-blocks, table-cells 和 table-captions），以及
overflow值不为visiable（除非该值已经延伸到视口上） 的块盒，都会为他们的内容创建新的块格式化上下文。在一个块格式化上下文里，盒子从包含块顶部开始一个接一个的纵向排列。两个相邻兄弟盒子之间的垂直的间隙取决于
margin定义。块级盒纵向相邻（水平书写格式下）的margins会在同一个块格式化上下文中折叠合并（取最大值）。在一个块格式化上下文里，每个盒子的左外边界会触碰到包含块的左边界（如果是从右到左的书写格式，则为右边界），即使同时存在浮动元素也是如此（虽然盒子的行框集可能会由于浮动的存在而缩小），除非这个盒子创建了一个新的块格式化上下文（在这种情况下，盒子本身由于浮动可能会变得更窄）。
这其实就是对于 BFC 的描述，也即大家常说的块格式化上下文，所以 BFC 没什么神秘的，只是 Block formatting contexts 的首字母缩写。
题外话：一个简单的概念，被各种 名词再造，不知道在什么时候突然成为了一个高大上的东西。以下省略2个字：讨厌。
为了方便理解，也为了符合大家的认知习惯，这个概念在下面都以 BFC 来代替。
Formatting context 的作用
待补充。。。