前端访谈 [CSS] - 什么是 BFC 及其触发条件是什么?
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 元素的直接子元素。
上一篇: 文件上传整合与流量分析
下一篇: CSS] 深入了解:什么是 BFC?