CSS中BFC的触发条件、特性及示例
2025/3/13
本文详细介绍了CSS中BFC的概念，包括其触发条件、特性，并给出示例说明其在解决布局问题中的作用。
BFC（Block Formatting Context，块级格式化上下文）是 CSS 中的一个重要概念，它决定了元素如何对其内容进行布局，以及与其他元素的关系和相互作用。BFC 的触发条件如下：
-
根元素（
<html>）：- 根元素本身就是一个 BFC。
-
浮动元素（
float不为none）：- 当一个元素的
float属性设置为left或right时，它会创建一个新的 BFC。
- 当一个元素的
-
绝对定位元素（
position为absolute或fixed）：- 当一个元素的
position属性设置为absolute或fixed时，它会创建一个新的 BFC。
- 当一个元素的
-
display为inline-block、table-cell、table-caption、flex、inline-flex、grid或inline-grid：- 这些
display属性值会触发 BFC。
- 这些
-
overflow不为visible：- 当一个元素的
overflow属性设置为hidden、scroll、auto或clip时，它会创建一个新的 BFC。
- 当一个元素的
-
contain属性为layout、content或paint：- 这些
contain属性值会触发 BFC。
- 这些
-
column-span为all：- 当一个元素的
column-span属性设置为all时，它会创建一个新的 BFC。
- 当一个元素的
BFC 的特性
- 内部元素垂直排列：BFC 内的块级盒子会在垂直方向上一个接一个地放置。
- 外边距折叠：BFC 内的元素不会与外部元素的外边距发生折叠。
- 包含浮动元素：BFC 会包含其内部的所有浮动元素，防止父元素高度塌陷。
- 阻止元素被浮动元素覆盖：BFC 可以阻止元素被浮动元素覆盖。
示例
<div style="overflow: hidden;">
<div style="float: left; width: 100px; height: 100px; background: red;"></div>
<div style="background: blue; height: 200px;"></div>
</div>
在这个例子中，外层的 div 通过 overflow: hidden 触发了 BFC，从而包含了内部的浮动元素，防止了父元素高度塌陷。
理解 BFC 的触发条件和特性对于解决布局问题（如清除浮动、防止外边距折叠等）非常有帮助。
标签：CSS
上次更新：