【CSS】文档流

1. 文档流的基本定义

文档流（normal flow） 指的是 元素在页面中按照默认规则排布时的流动方向和方式。

• 块级元素（div, p, h1…）会从上到下顺序排列，占满一整行。
• 行内元素（span, a, strong…）会在同一行内从左到右排列，直到遇到边界或换行。

👉 可以理解为：文档流就是浏览器在没有任何特殊样式干预时，元素的自然布局规则。

---

2. 脱离文档流

有些 CSS 属性会让元素 脱离文档流，不再遵循正常的排列规则：

• float：元素浮动，脱离标准文档流，但仍影响其他元素的文字环绕。
• position: absolute / fixed：完全脱离文档流，不再占据原来的空间。
• display: none：不占文档流空间（与 visibility: hidden 不同）。

• position: relative：不会脱离文档流，只是相对自身偏移。

---

3. 为什么要理解文档流？

理解文档流能帮助你：

• 明白为什么某个元素“顶上去了”或“重叠了”。
• 掌握布局方式（流式布局、浮动布局、定位布局、Flex、Grid 等）。

---

4. 举个例子

正常文档流

<div style="background: lightblue;">A 块级元素</div>
<div style="background: lightgreen;">B 块级元素</div>
<span style="background: pink;">行内元素1</span>
<span style="background: yellow;">行内元素2</span>

👉 A 在上，B 在下；行内元素1 和 行内元素2 在一行。

---

脱离文档流

<div style="background: lightblue;">A 块级元素</div>
<div style="background: lightgreen; position: absolute; top: 0; left: 0;">B 块级元素（absolute）
</div>

👉 B 脱离文档流，覆盖在 A 上方。

---

✅ 总结：
文档流 = 元素在网页中的默认排布方式。理解它，就是理解页面为什么会那样排版。