Block Formatting Context的缩写

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）

BFC 的原理/BFC的布局规则【非常重要】

BFC 的原理，其实也就是 BFC 的渲染规则（能说出以下四点就够了）。包括：

（1）BFC 内部的子元素，在垂直方向，边距会发生重叠。

（2）BFC在页面中是独立的容器，外面的元素不会影响里面的元素，反之亦然。

（3）BFC区域不与旁边的float box区域重叠。（可以用来清除浮动带来的影响）。

（4）计算BFC的高度时，浮动的子元素也参与计算。

3.如何生成BFC，有以下几种方法：

方法1：overflow: 不为vidible，可以让属性是 hidden、auto。【最常用】

方法2：浮动中：float的属性值不为none。意思是，只要设置了浮动，当前元素就创建了BFC。

方法3：定位中：只要posiiton的值不是 static或者是relative即可，可以是absolute或fixed，也就生成了一个BFC。

方法4：display为inline-block, table-cell, table-caption, flex, inline-flex

一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：

1、float的值不是none。

2、position的值不是static或者relative。

3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

4、overflow的值不是visible

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。