定义：Block format context 块级格局上下文
BFC原理：

1.BFC元素垂直方向上边距会产生重叠（哪个px大就抉择哪个）
2.BFC区域不会与浮动元素产生重叠
3.BFC是一个独立容器，容器外面的元素不会影响到里面的元素，里面的元素也不会影响他。
4.计算BFC的高度时，浮动元素也参加计算。

创立BFC：

float属性不为none
position属性为absolute或fixed
display属性为inline-block、table-cell、table-caption、flex、inline-flex
overflow属性不为visible

BFC应用场景

1.自适应两栏布局（浮动时，右浮动高于左浮动）
在浮动元素上加overflow:hidden
2.革除外部浮动（当子元素均浮动时，其无奈撑开父元素）
在父元素上加 overflow: hidden;
3、避免marin重叠
在其中一个元素上减少一个父元素，加属性：overflow: hidden;