前端面试 CSS— 什么是BFC？它的触发条件有哪些？

Posted 2021-12-13 aiguangyuan

1. 什么是BFC?

Block Fromatting Context， 即块级格式上下文。

W3C对BFC的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器（如 inline-blocks, tablecells, 和 table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的 BFC。

2. BFC的触发条件

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

1. 根元素；

2. 浮动元素。元素的 float 不是 none；

3. 绝对定位元素。元素的 position 为 absolute 或 fixed；

4. 行内块元素。元素的 display 为 inline-block；

5. 表格单元格。元素的 display为 table-cell，HTML表格单元格默认为该值；

6. 表格标题。元素的 display 为 table-caption，HTML表格标题默认为该值；

7. 匿名表格单元格元素。元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table；

8. overflow 值不为 visible 的块元素 ；

9. 弹性元素。display为 flex 或 inline-flex元素的直接子元素；

10. 网格元素。display为 grid 或 inline-grid 元素的直接子元素。