讲不清楚的BFC

BFC全称"Block formatting Context"，也叫块级格式化上下文。
CSS文档里对BFC的描述

浮动，绝对定位元素，非块盒的块容器（inline-block,table-cells）和overflow不为visible的块盒会为他们的内容建立一个新的格式化上下文

在一个BFC中，盒的数值方向一个接一个地放置，从包含块的顶部开始。两兄弟盒之间的竖直距离由margin属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并

在一个BFC中，每个盒的left外边（left outer edge）挨着包含块的left边。即使存在浮动，这也成立。除非该盒建立新的BFC。

MDN对BFC的描述

一个BFC由以下之一创建：

1，根元素或其它包含它的元素
2，浮动元素 (元素的 float 不是 none)
3，绝对定位元素 (元素具有 position 为 absolute 或 fixed)
4，内联块 (元素具有 display: inline-block)
5，表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
6，表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
7，具有overflow 且值不是 visible 的块元素，
8，display: flow-root（css3）
9，column-span: all 应当总是会创建一个新的格式化上下文，即便具有 column-span: all 的元素并不被包裹在一个多列容器中。