文档流是块级元素自上而下、行内元素自左至右的默认布局行为，元素按源码顺序占据空间并参与父容器高度计算；浮动或绝对定位会使元素脱离文档流，而Flex/Grid容器自身仍在文档流中，仅子元素由新规则布局。
HTML 文档流是浏览器解析 HTML 时默认的布局顺序，它决定了元素在页面中自然出现的位置和排列方式——不是你“写在哪”，而是浏览器“按规则排在哪”。理解它，才能预判 display、position、浮动或 flex 布局带来的实际效果，而不是靠反复试错。
什么是文档流（normal flow）？
文档流指块级元素从上到下、行内元素从左到右依次排列的默认行为。每个元素按源码顺序占据空间，不脱离布局上下文，也不影响其他元素的原始位置计算。
关键点：
-
<p>、<div>、<h1>等块级元素默认独占一行，垂直堆叠 -
<span>、<a>、<strong>等行内元素在同一行内水平排列，直到父容器宽度不足才换行 - 文档流中的元素会参与父容器的 height 计算（比如父
<div>高度由子块级元素撑开） - 浮动（
float）或绝对定位（position: absolute）会让元素脱离文档流，不再占据原始空间
为什么 display: inline 元素不换行却无法设宽高？
因为行内元素在文档流中只占据内容所需空间，其 width 和 height 属性被忽略（除了 line-height 影响行高）。这不是 bug，而是规范定义的行为。
立即学习“前端免费学习笔记（深入）”；
常见应对方式：
- 改用
display: inline-block：保留行内排列特性，同时支持width/height/margin设置 - 改用
display: block+float: left或display: flex父容器控制排列 - 避免对纯文本包裹的
<span>直接设尺寸，优先用语义化标签或外层容器承载样式
浮动元素如何破坏文档流？
float: left 或 float: right 会让元素脱离文档流，导致后续块级元素“无视”它而向上移动，父容器也常因内部浮动元素不参与高度计算而塌陷。
典型症状：
- 父
<div>高度为 0，背景色/边框消失 - 紧随其后的
<p>跑到浮动元素右侧（文字环绕）或顶部（块级元素“穿过去”） - 清除浮动不是目的，而是修复文档流断裂的副作用
推荐解法（按现代优先级）：
- 父容器设
display: flow-root（最轻量，无额外 DOM） - 父容器触发 BFC：如
overflow: hidden（兼容性好但可能截断内容） - 不用
clear: both伪元素（老式 clearfix 已过时）
Flex 和 Grid 容器是否还遵循文档流？
它们本身仍处于文档流中（比如一个 display: flex 的 <div> 仍会按块级方式堆叠），但其**子元素**已脱离传统文档流，由 flex 或 grid 规则重新布局。
这意味着：
- 子元素的
float、vertical-align、display: inline等属性失效 - 子元素的 margin 合并规则不再适用（flex item 不会发生外边距合并）
- 父容器高度依然由 flex 容器自身决定（比如设了
height: 200px就固定，没设就由内容撑开）
真正容易被忽略的是：flex 容器的 align-items 和 grid 容器的 justify-content 控制的是“容器内”布局，不影响它自己在外部文档流中的位置——它仍是普通块级元素，除非你给它加 position: absolute。
