定义

BFC（block Formating context）块级格式上下文，它是页面中的一块渲染区域，具有一定的渲染规则，决定了其中子元素的布局方式和与其他元素的相互作用和关系。

通俗讲，BFC是一个独立的布局环境，可以理解为一个容器，在这个容器中按照一定规则进行物品摆放，并且不会影响其它环境中的物品。如果一个元素符合触发BFC的条件，则BFC中的元素布局不受外部影响。

如何创建BFC

1. 根元素 html

2. 浮动元素（float除了none之外）

3. 绝对定位元素（position为fixed或者absolute）

4. display属性设置为inline-block、inline-flex等

5. overflow值不为visible的元素

BFC的特点

1. 垂直方向上，自上而下排列，和文档流的排列方式一致。

2. 垂直方向上的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠

3. 计算BFC的高度时，需要计算浮动元素的高度

4. BFC的区域不会与float的元素区域重叠

5. BFC是独立的容器，容器内部元素不会影响外部元素

6. 每个元素(子元素)的margin-left， 与包含块(父元素)border-left相接触

BFC作用或者应用或者解决了什么

1. 解决高度塌陷问题

2. 解决margin的重叠问题

3. 阻止元素被浮动元素覆盖（创建自适应两栏布局）