我们都知道block level box都是在BFC中布局的,那我们来看一下官方文档中：
在MDN文档中有整理什么情况下会创建BFC：
- 根元素(html标签)
- 浮动元素(元素的float不是none)
- 绝对定位元素(元素的position为absolute或fixed)
- 行内块元素(元素的display 为inline-block)
- 表格单元格(元素的display 为table-cell, HTML表格单元格默认为该值)，表格标题(元素的 display 为table-caption，, HTML表格标题默认为该值)匿名表格单元格元素(元素的 display 为 table、table-row.table-row-group.table-header-group.table-footer-group (分别是HTML table.row、tbody、thead、tfoot 的默认属)或 inline-table)
- overflow 计算值(Computed)不为 visible 的块元素
- 弹性元素(display为flex或inline-flex元素的直接子元素)
- 网格元素(display 为grid或inline-grid元素的直接子元素)
- display值为flow-root 的元素
感谢大家观看
什么是FC呢?他是用来干什么的？ - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员 游客 2026-03-14 11:00 回复
[...]什么是FC呢这里我们给出W3C给出的文档，FC文档FC的全称是FormattingContext，元素在标准流里面都是属于一个FC的。那么什么又是IFC，BFC呢？IFC行内元素的布局都属于Inline Formatting,inline level box都是在IFC中布局的BFCBFC英文全称是Block Formatting Context,也就是block level box都是在BFC中[...]
BFC的作用是什么呢? - 程序员鸡皮-前端程序员|PHP程序员|全栈程序员 游客 2026-03-14 11:41 回复
[...]在BFC中，box会在垂直方向上一个挨着一个的排布垂直方向的间距由margin属性决定在同一个BFC中，相邻两个box之间的margin会折叠(collapse)在BFC中，每个元素的左边缘是紧挨着包含块的左边缘的然后我们再看一下官方文档中如何说明的？总结BFC是什么？W3C文档讲：在标准流中，我们所有的盒子，不管是块级盒子还是行内盒子，它们都属于某一个FC格式化上下文，块级盒子属于BFC`块级格[...]