网站
引入
网页中的元素默认就会按照一定规则排列，不写复杂布局代码时，浏览器也会自动把内容显示出来。
这个默认的排列规则，就是 CSS 中常说的文档流。
正文
定义
定义
文档流也叫正常流，指的是 HTML 元素在页面中按照默认规则从上到下、从左到右排列的方式。
简单理解：
HTML 元素写在文档中，浏览器会按照它们出现的顺序，一个接一个地显示出来。
如果没有使用 position、float、flex、grid 等特殊布局方式，大多数元素都会在文档流中正常排列。
基础表现
在文档流中，元素的排列方式主要和它的 display 类型有关。
常见情况：
- 块级元素通常会从上到下排列
- 内联元素通常会从左到右排列
- 元素会占据自己的空间
- 后面的元素会受到前面元素所占空间的影响
块级元素在文档流中
块级元素通常会独占一行。
<div class="box">第一个盒子</div>
<div class="box">第二个盒子</div>
<div class="box">第三个盒子</div>.box {
background-color: #e5e7eb;
margin-bottom: 12px;
padding: 16px;
}这三个 <div> 会按照 HTML 中的顺序，从上到下排列。
因为 <div> 默认是块级表现，所以每个 <div> 都会独占一行。
常见块级元素：
<div><p><h1>到<h6><ul><ol><li><section><article>
内联元素在文档流中
内联元素通常不会独占一行，而是和其他内容排在同一行。
<p>
这是一段文字，里面有
<span class="mark">重点内容</span>
和一个
<a href="#">链接</a>。
</p>.mark {
color: red;
}这里的 <span> 和 <a> 会跟文字一起在同一行显示。
如果一行放不下，内容会自动换到下一行。
常见内联元素：
<span><a><strong><em><label><img>
文档流中的空间关系
文档流中的元素会占据页面空间。
前面的元素变高，后面的元素就会被往下推。
<div class="card">卡片内容比较多，会占据更高的空间。</div>
<p>这段文字会出现在卡片下面。</p>.card {
padding: 24px;
background-color: #f3f4f6;
}如果 .card 的内容变多，高度增加，下面的 <p> 会自动往下移动。
这就是文档流很重要的地方：元素之间默认会互相影响位置。
脱离文档流
有些 CSS 写法会让元素脱离文档流。
脱离文档流后，这个元素就不再占据原来的位置，后面的元素可能会当它不存在一样继续排列。
常见会影响文档流的写法：
| 写法 | 是否脱离文档流 | 说明 |
|---|---|---|
position: static; | 否 | 默认定位方式，元素在文档流中 |
position: relative; | 否 | 相对自身偏移，原位置还保留 |
position: absolute; | 是 | 绝对定位，通常脱离文档流 |
position: fixed; | 是 | 固定在视口中，脱离文档流 |
float: left; | 部分脱离 | 会影响文字环绕和后续布局 |
position: relative;
position: relative; 不会让元素脱离文档流。
.box {
position: relative;
top: 20px;
}这个元素看起来会向下移动 20px，但是它原来的位置还会被保留。
所以后面的元素不会自动占用它原来的位置。
position: absolute;
position: absolute; 会让元素脱离文档流。
<div class="card">
<span class="badge">推荐</span>
<p>这是一张卡片。</p>
</div>.card {
position: relative;
padding: 24px;
background-color: #f3f4f6;
}
.badge {
position: absolute;
top: 8px;
right: 8px;
background-color: red;
color: white;
}这里 .badge 使用了 position: absolute;，它会脱离文档流。
.card 里面的其他内容不会因为 .badge 占了空间而自动避开它。
float 和文档流
float 最早常用来做文字环绕图片，也会改变元素在文档流中的表现。
<img class="cover" src="cover.jpg" alt="封面">
<p>这是一段介绍文字，会围绕图片排列。</p>.cover {
float: left;
width: 120px;
margin-right: 16px;
}图片会浮动到左侧，文字会在它旁边环绕。
现在做整体页面布局时，更常用 flex 和 grid，不太建议用 float 做大布局。
常见属性
| 属性 | 作用 |
|---|---|
display | 控制元素的显示类型，例如 block、inline、inline-block |
position | 控制元素的定位方式 |
top | 配合定位控制元素向下或向上偏移 |
right | 配合定位控制元素右侧位置 |
bottom | 配合定位控制元素底部位置 |
left | 配合定位控制元素左侧位置 |
float | 让元素浮动，常用于文字环绕 |
clear | 清除浮动对后续元素的影响 |
例子
普通文档流中的卡片
下面的卡片会按照顺序从上到下排列。
<div class="card">第一张卡片</div>
<div class="card">第二张卡片</div>.card {
padding: 16px;
margin-bottom: 12px;
background-color: #f9fafb;
border: 1px solid #d1d5db;
}每个 .card 都在文档流中，所以它们会互相占据空间，不会重叠。
绝对定位的角标
这个例子把角标放到卡片右上角。
<div class="product">
<span class="tag">新品</span>
<h3>商品标题</h3>
<p>商品说明文字</p>
</div>.product {
position: relative;
padding: 24px;
border: 1px solid #d1d5db;
}
.tag {
position: absolute;
top: 8px;
right: 8px;
padding: 4px 8px;
background-color: #ef4444;
color: white;
}.tag 脱离文档流后，可以放在卡片角落。
但它不占普通位置，所以要注意不要挡住其他文字。
特点
- 文档流是浏览器默认的页面排列方式
- 块级元素通常从上到下排列
- 内联元素通常从左到右排列
- 文档流中的元素会占据空间
- 前面元素的大小会影响后面元素的位置
position: relative;不会脱离文档流position: absolute;和position: fixed;通常会脱离文档流- 脱离文档流的元素可能会和其他元素重叠
- 做普通内容排版时，优先利用文档流，不要一开始就大量使用定位
注意事项
- 不要把所有元素都用
position: absolute;定位，这样页面会很难维护 - 文档流适合普通文章、列表、卡片等自然排列的内容
- 如果只是想让元素上下排列，通常不需要特殊布局
- 如果想让元素横向排列，可以考虑
display: flex; - 脱离文档流后，要注意元素是否遮挡内容
- 响应式页面中，依赖文档流通常比写死位置更稳定
理解
可以把文档流理解为网页的默认排队规则。
块级元素像一排一排往下站，内联元素像一行文字从左往右排。
只要元素还在文档流中，它就会占位置，也会影响后面的元素。
一旦元素脱离文档流，就像从队伍里拿出来单独摆放，位置更自由，但也更容易重叠和失控。
所以学习布局时，要先理解文档流，再去理解 CSS 内联元素与块级元素、CSS 盒模型、CSS 定位、CSS Flexbox 这些更具体的布局方式。
引出
理解文档流之后，可以继续学习 CSS 盒模型，因为元素在文档流中占据多大空间，和 content、padding、border、margin 都有关系。