理解CSS块级格式上下文（BFC）

什么是块级格式上下文

块级格式上下文（Block Formatting Context）简称BFC

一些元素，如float元素，如position为absolute,inline-block,table-cell或table-caption的元素，以及overflow属性不为visible的元素，它们将会建立一个新的块级格式化上下文。

上述定义已经很详细的描述了块级格式化上下文(Block Formatting Context)是如何形成的，为了方便起见，文中均用BFC代替。
现在，让我们用一种简单的方式对其进行重新定义:
BFC也是HTML中的一个盒子（看不见而已），只有满足至少下列条件之一才能形成BFC:

• float属性不为none.

• position属性不为static和relative.

• display属性为下列之一:table-cell,table-caption,inline-block,flex,or inline-flex.

• overflow属性不为visible.

如何创建BFC

在MDN中有一大堆方法交我们创建BFC，但在一般情况下我们只需要满足上面的其中一个条件就可以了

• 浮动元素 (元素的 float 不是 none)
• 绝对定位元素 (元素的 position 为 absolute 或 fixed)
• 内联块元素 (元素具有 display: inline-block)
• overflow属性非visiable的属性

BFC的特性

• BFC内的浮动不会影响到BFC外部的元素
• BFC的高度会包含其内的浮动元素
• BFC不会和浮动元素重叠
• BFC可以通过overflow : hidden 等方法创建

BFC的作用

• 清除浮动
• 防止margin折叠
• 双栏布局