当前位置：首页 > news >正文

CSS：块格式化上下文(BFC)

news 2025/6/26 2:04:29

块格式化上下文是块级盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

块格式化上下文(BFC)的创建

满足以下条件将创建块格式化上下文：

根元素（）
浮动元素（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、tr、tbody、thead、tfoot 的默认值）或 inline-table）
overflow 值不为 visible、clip 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content 或 paint 的元素
弹性元素（display 值为 flex 或 inline-flex 元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器
网格元素（display 值为 grid 或 inline-grid 元素的直接子元素），如果它们本身既不是 flex、grid 也不是 table 容器
多列容器column-span 值为 all 的元素始终会创建一个新的 BFC

在块格式化上下文中，从包含块的顶部开始，一个接一个地垂直排列框。
两个同级框之间的垂直距离由“margin”决定。块格式上下文中相邻块级别框之间的垂直边距折叠。
在块格式化上下文中，每个框的左外边缘与包含块的左边缘接触（对于从右到左的格式化，右边缘接触）。即使在存在浮点数的情况下也是如此（尽管框的行框可能会由于浮点数而收缩），除非框建立了新的块格式化上下文（在这种情况下，框本身可能会因为浮点数而变得更窄）。