CSS 视觉格式化模型

CSS 视觉格式化模型（Visual Formatting Model）是 CSS 的核心布局机制，它定义了浏览器如何将 DOM 树转换为可视化布局。以下是其核心要点解析：

1. 基本概念

视觉格式化模型通过以下要素控制元素布局：

• 视口（Viewport）：浏览器渲染区域

• 包含块（Containing Block）：元素布局的参考坐标系

• 盒模型（Box Model）：内容区、内边距、边框、外边距

• 格式化上下文（Formatting Context）：布局规则集合

2. 关键布局规则

（1）盒类型（display 属性）

类型	特性
块级盒	独占一行，可设置宽高（如 <div>、<p>）
行内盒	不换行，宽高由内容决定（如 <span>、<a>）
行内块盒	行内布局但可设宽高（如 <img>、<button>）
弹性盒	通过 display: flex 启用弹性布局
网格盒	通过 display: grid 启用网格布局

（2）定位方案

定位模式（position）	脱离文档流	定位基准	典型用例
static (默认)	否	正常流	普通文档流布局
relative	否	自身原始位置	微调元素位置
absolute	是	最近非 static 祖先	弹出层、精确定位
fixed	是	视口	固定导航栏、悬浮按钮
sticky	否→是	最近滚动祖先+视口	吸顶效果

（3）浮动（float）

• 使元素脱离常规流，向左右移动直到碰到容器边缘

• 触发块格式化上下文（BFC）

• 经典问题：父元素高度塌陷（通过 clearfix 解决）

3. 格式化上下文

（1）块级格式化上下文（BFC）

触发条件：

float: left/right;
position: absolute/fixed;
display: inline-block/table-cell/flex/grid;
overflow: hidden/auto/scroll;

特性：

• 内部盒子垂直排列

• 垂直边距折叠（Margin Collapse）

• 隔离外部浮动影响

（2）行内格式化上下文（IFC）

• 水平排列行内级盒子

• 通过 vertical-align 控制垂直对齐

• 典型应用：文本行布局

（3）弹性格式化上下文（FFC）

• display: flex 触发

• 通过主轴/交叉轴控制子项布局

（4）网格格式化上下文（GFC）

• display: grid 触发

• 二维网格布局系统

4. 层叠与渲染顺序

元素按以下顺序层叠（从底到顶）：

1. 定位元素的 z-index: -1

2. 常规流块级盒

3. 浮动盒

4. 常规流行内盒

5. z-index: 0 的定位元素

6. z-index: 1+ 的定位元素

5. 经典布局问题与解决方案

问题	解决方案
垂直居中	Flexbox (align-items: center + justify-content: center)
等高列	Flexbox 或 Grid 布局
清除浮动	clearfix 或父元素触发 BFC
外边距折叠	触发 BFC 或改用 padding
圣杯布局	Flexbox/Grid 或传统浮动方案

6. 现代布局实践

（1）Flexbox 示例

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

（2）Grid 示例

.container {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 20px;
}

（3）多列布局

.container {
  column-count: 3;
  column-gap: 1em;
}

7. 性能优化要点

• 减少重排：优先使用 transform/opacity 做动画

• 避免深层嵌套：复杂选择器影响渲染性能

• 合理使用 contain 属性：限制浏览器重绘范围

• 硬件加速：will-change: transform

可视化总结

理解视觉格式化模型是掌握 CSS 布局的核心，现代布局方案（Flexbox/Grid）虽简化了开发，但底层仍遵循此模型规则。