CSS 文档流

文档流是指 HTML 元素在页面中默认的排列方式和布局规则。浏览器按照元素在 HTML 中出现的顺序，遵循特定的规则来排列它们。

文档流负责什么？

• 元素如何从上到下排列
• 元素如何在一行中从左到右排列
• 元素如何占据空间（宽度/高度）
• 元素如何互相推挤

标准文档流（Normal Flow）

标准文档流是元素默认的、未被特殊 CSS 属性改变的排列方式。

标准文档流 = 文档流的正常状态，是所有布局的基础。

在标准文档流中：

块级元素 block

• 独占一行（前后自动换行）
• 可以设置宽度、高度
• 默认宽度撑满父容器
• 可以设置所有方向的内外边距

内联元素 inline

• 在一行内显示，不换行
• 不能设置宽度、高度
• 宽度高度由内容决定
• 可以设置左右内外边距
• 不能设置上下内外边距

inline-block 元素

• 像行内元素一样排列（不换行）
• 像块级元素一样可以设置宽高边距

margin/padding 会影响其他元素

元素之间会互相推挤。

非标准文档流（Out of Normal Flow / 脱离文档流）

当元素应用了某些 CSS 属性，使其脱离了标准文档流的控制，就形成了非标准文档流。

非标准文档流的三大来源：

1. position: absolute | fixed

完全脱离文档流

• 不占位置
• 不会推挤任何元素
• 悬浮在页面中
• 位置由 top/left/right/bottom 决定

但视觉上 B 仍然会出现，只是浮在页面上。

2. position: sticky

只有“吸顶时”短暂脱离文档流 属于部分脱流，不完全。

3. float（半脱离文档流）

float 比较特殊：

• 自身脱离标准流
• 但文本会环绕它（半脱流）
• 不会撑开父元素高度（除非 clear）

核心区别对比

特性	标准文档流	非标准文档流
排列方式	从上到下，块级换行	自由定位，不受默认规则限制
空间占用	✅ 占据正常空间	❌ 不占据正常空间
布局影响	影响后续元素位置	可能覆盖或环绕其他元素
包含关系	父元素自动包含子元素	父元素可能"高度塌陷"
响应式	天然响应式	需要手动处理响应式
性能	性能最优	可能引起重排重绘

总结（一句话版）

• 文档流： 浏览器默认的布局规则。
• 标准文档流： 元素按正常顺序排列、占空间、互相推挤。
• 非标准文档流： 元素脱离默认布局，不占空间、不推挤其它元素（absolute、fixed、float 等）。

现代布局的发展

从非标准流到现代布局