什么是块级格式上下文
块级格式上下文（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折叠
- 双栏布局
