Appearance
BFC(块级格式化上下文)
📚 概念定义
BFC(Block Formatting Context)是 CSS 中的一种重要布局概念:
- 官方定义:MDN 将其解释为"块级格式化上下文"
- 核心特性:一个独立的渲染区域,拥有自己的渲染规则
- 隔离特性:内部元素不会与外部元素互相影响
🎯 触发条件
以下 CSS 属性可以触发 BFC:
🏗️ 布局属性
float
: 除none
以外的值position
:absolute
或fixed
🖥️ 显示模式
display
:inline-block
table-cell
table-caption
🌊 溢出处理
overflow
: 除visible
以外的值(hidden
/auto
/scroll
)
✨ 特性表现
BFC 具有以下重要特性:
- 垂直排列:内部 Box 在垂直方向顺序排列
- 边距计算:垂直间距由 margin 决定
- 浮动隔离:不与 float 元素区域重叠
- 高度计算:计算高度时包含浮动元素
- 布局隔离:形成独立容器,内外元素互不影响
🛠️ 应用场景
- 如果二个 div 元素上下排列,一个设置 margin-bottom,另外一个设置 margin-top,会导致 margin 上下重叠,取比较大的一个值