网页布局-文档流规则

1️⃣ 什么是文档流？

文档流是浏览器默认的布局规则：

元素按照 HTML 中出现的顺序排列，浏览器自动计算它们的位置、宽高。

简单来说，就是 **网页元素在页面上自然“排队”**的方式。

2️⃣ 文档流的行为

1、块级元素（block）

占据一整行宽度（默认撑满父容器）

高度由内容决定（内容多，高度就增加）

下面的元素会自动排列在它的下方

<div style="background: lightblue;">块级元素1</div>
<div style="background: lightgreen;">块级元素2</div>

效果：块级元素2在块级元素1下方。

2、行内元素（inline）

不会独占一行

宽高由内容决定

与同一行的其他行内元素水平排列

<span>行内1</span><span>行内2</span>

效果：两个 在同一行显示。

3️⃣ 文档流中的特殊情况

① 浮动元素（float）

元素脱离文档流的垂直排列，但仍影响文本环绕

常用于图文混排、文字环绕图片

img {
  float: left;
}

② 绝对定位元素（position: absolute）

完全脱离文档流

不占据空间，父元素和兄弟元素会忽略它

定位相对于最近的 非 static 父元素

③ 固定定位元素（position: fixed）

脱离文档流

相对于视口固定位置，不随页面滚动移动

④ 粘性定位元素（position: sticky）

在文档流中占据原本空间

滚动到阈值后固定位置，超过父容器范围则失效

4️⃣ 总结一句话

文档流就是浏览器默认“排队”规则：块级元素从上到下排列，行内元素从左到右排列，浮动/绝对定位/固定定位等会脱离文档流，用于精细控制布局。

>💡 小技巧：

理解文档流 → 理解为什么 absolute 脱离流、float 会导致父元素高度塌陷

前端布局很多问题都能追根溯源到文档流