什么是BFC?BFC布局规则、触发条件、应用场景

什么是BFC：

Block 块

Formatting 格式化

Context 上下文

直译为块级格式化上下文，是CSS规则里【独立的渲染区域】有自己的渲染规则，只有块状的盒子参与

生成BFC的条件：

根元素本身

float:left,right

position:fixed,absolute

overflow:hidden\scroll\auto

display:inline-block,table-caption,table-cell、flex….

BFC渲染规则：

隔离的独立容器（结界）

【封闭性】

1.不会出现margin值塌陷问题

2.包含浮动子元素不会出现高度塌陷

3.不与浮动元素重叠

作用（帮我们解决了什么问题）？

1.清浮动

2.margin值塌陷问题

3.创建两列布局（BFC区域不与浮动元素重叠）

应用：父元素overflow可以解决margin值塌陷，浮动问题

原理：生成BFC改变了它的渲染规则— 所以margin值塌陷问题、浮动问题

关于作者：炮渣日记