前端面试CSS系列——BFC

Posted 2021-09-10 mmcai

介绍下BFC及其应用

定义

BFC（Block Formatting Context）翻译为『块级格式化上下文』。是一个独立的渲染区域，只有（Block-level box）块级盒子参与，BFC规定了内部盒子如何布局，以及盒子之间的关系和作用。

解释说明

Box(盒子)

Box盒子是CSS 布局的基本单位，在CSS中我们广泛的使用两种『盒子』——块级盒子和内联盒子。html元素的类型和display属性，决定了一个Box（盒子）的类型。不同类型的Box（盒子），会参与不同的Formatting Context（格式化上下文）。

Formatting Context(格式化上下文)

Formatting Context（格式化上下文） 是页面中的一块渲染区域，它决定了子元素将如何布局，以及子元素之间的关系和作用。

Block Formatting Context，块级格式化上下文，是Formatting Context（格式化上下文）的一种类型，只有（Block-level-box）块级盒子参与；相对应有Inline Formatting Context （IFC内联格式化上下文）。CSS3之后，还有GFC（Grid）和FFC（Flex）。

规则

1. 内部的box会按照垂直方向叠放
2. BFC是页面上一个被隔离的容器，BFC内部的子元素布局不会影响到外面的元素布局。
3. 内部的box，垂直方向的距离由margin来控制。
4. 内部相邻Box的margin会发生重叠。
5. BFC的区域不会与float box重叠
6. 计算BFC的高度时，浮动元素也参与计算

应用

1. 清除浮动（让浮动元素的父级触发BFC）
2. 阻止同一个BFC内box外边距合并
3. 自适应两栏布局
4. 阻止元素被（float）浮动元素覆盖

如何创建(触发)BFC

• 根元素
• 浮动元素
• 定位元素
• 行内块元素
• 表格单元格
• 表格标题
• overflow不为visible的块元素
• display值为flow-root的元素
• contain值为layout、content或paint元素
• 弹性元素flex布局元素的直接子元素
• 多列容器grid布局元素的直接子元素
• ...

总结

BFC块级格式化上下文，简单来说是一个封闭的区域，这区域里面的盒子不会影响区域外面的布局。BFC区域内的盒子需要遵守一些布局规则，比如：盒子会按照垂直方向排，盒子垂直方向的距离由margin控制，BFC 区域不与浮动框重叠，计算BFC的高度时，浮动元素也参与计算等。根据BFC的布局规则，BFC可以解决清除浮动，外边距合并等异常布局，也可以实现自适应两栏布局，阻止元素被浮动元素覆盖。创建(触发)BFC的条件有给元素添加overflow属性且值不为visible，float属性且值不为none，display属性值为：flow-root,inline-block,table-cell,table，table-row，flex，grid等。

参考链接

CSS of BFC

it邦——BFC

BFC in Css

https://www.programmersought.com/