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

代码编程 cat 12个月前 (10-22) 44次浏览已收录 0个评论扫描二维码

什么是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值塌陷问题、浮动问题

关于作者：cat

作者主页