Skip to content

BFC(块级格式化上下文)

📚 概念定义

BFC(Block Formatting Context)是 CSS 中的一种重要布局概念:

  • 官方定义:MDN 将其解释为"块级格式化上下文"
  • 核心特性:一个独立的渲染区域,拥有自己的渲染规则
  • 隔离特性:内部元素不会与外部元素互相影响

🎯 触发条件

以下 CSS 属性可以触发 BFC:

🏗️ 布局属性

  • float: 除none以外的值
  • position: absolutefixed

🖥️ 显示模式

  • display:
    • inline-block
    • table-cell
    • table-caption

🌊 溢出处理

  • overflow: 除visible以外的值(hidden/auto/scroll

✨ 特性表现

BFC 具有以下重要特性:

  1. 垂直排列:内部 Box 在垂直方向顺序排列
  2. 边距计算:垂直间距由 margin 决定
  3. 浮动隔离:不与 float 元素区域重叠
  4. 高度计算:计算高度时包含浮动元素
  5. 布局隔离:形成独立容器,内外元素互不影响

🛠️ 应用场景

  • 如果二个 div 元素上下排列,一个设置 margin-bottom,另外一个设置 margin-top,会导致 margin 上下重叠,取比较大的一个值