BFC的含义
BFC(Block Formatting Context,块级格式化上下文) 是 CSS 渲染中的一种独立布局环境,用于控制块级元素的布局规则。它通过隔离内部元素与外部元素的关系,解决一些常见的布局问题(如边距折叠、浮动元素高度塌陷等)。
BFC的触发条件
- 根元素
<html>
- 浮动元素 :
float
不为none
- 绝对定位元素 :
position
为absolute
或fixed
- overflow 非默认值 :
overflow
设为hidden
、auto
、scroll
- display 特定值 :
inline-block
、flex
、grid
、table-cell
、table-caption
等
BFC的常见应用场景
1. 解决外边距重叠
html
<div class="box"></div>
<div class="box"></div>
若两个 .box
元素的外边距为 20px
,实际间距为 20px
(而非 40px
)。
通过 BFC 隔离:
html
<div class="bfc-container">
<div class="box"></div>
</div>
<div class="box"></div>
为 .bfc-container
设置 overflow: hidden
,两个 .box
的边距不再折叠。

2. 清除浮动(Containing Floats)
html
<div class="parent">
<div class="float-child">box</div>
</div>
若 .float-child
浮动,.parent
高度会塌陷。

触发 BFC:
css
.parent { overflow: hidden; } /* 父元素包裹浮动子元素 */

总结
BFC 通过创建独立的渲染区域,为开发者提供了更精准的布局控制能力。
- 隔离布局环境:通过阻断元素间的相互影响,解决边距折叠、浮动高度塌陷等经典问题。
- 灵活触发方式 :通过简单属性(如
overflow: hidden
、display: inline-block
)即可快速触发,适配不同场景需求。 - 提升代码可控性:减少布局"玄学问题",使元素定位、尺寸计算更符合预期。