A05 文档流与 display

摘要：不写任何布局属性时，元素按文档流排列：块级独占一行，行内元素从左到右排满换行。display 决定元素参与哪种流，position 与浮动则让它脱离流。分清「在流内」与「脱离流」是理解后续所有布局的前提。
关键词：文档流，块级，行内，display，脱离流

所属：frontend/css / A-入门 ｜ 上一篇：A04-盒模型 ｜ 下一篇：A06-Flex布局

1 引言

布局属性越用越多时，问题往往回到一个基础判断：这个元素还在文档流里吗。在流内的元素会撑开父元素、影响兄弟位置；脱离流的元素不再占位。

本文给出 display 的取值影响与两种脱离流的方式。范围见表 1-1。

项	本文覆盖	本文不覆盖
流规则	块级、行内、行内块的排列与尺寸行为	表格与多列布局
display	block、inline、inline-block、none、contents	弹性与网格（A06、A07）
脱离流	float、position: absolute/fixed	层叠上下文细节（B03）

2 预备知识

项	要求	核对方式
环境	本地服务器可用	浏览器能打开 localhost
文件	css-practice/flow.html	编码 UTF-8
浏览器	Chrome 130+，Layout 面板可用	能看到元素盒子边界
前置	A04	会算盒模型尺寸

3 原理与实现

3.1 三种参与方式

元素与文档流的关系只有三种状态，如图 3-1 所示。

flowchart TD
    E["元素"] --> A["在流内<br/>块级 / 行内 / 行内块"]
    E --> B["脱离流<br/>float / absolute / fixed"]
    E --> C["不参与渲染<br/>display: none"]
    A --> A1["影响兄弟位置，撑开父元素"]
    B --> B1["不占位，需要手动清除或定位父级"]
    C --> C1["不占位，脚本仍可访问"]

图 3-1 元素与文档流的三种关系

图上可见：display: none 与 visibility: hidden 的区别在于前者不占位；脱离流的元素从兄弟的计算中消失。

3.2 三种 display 的对照

/* 运行环境：Chrome 130+；css-practice/flow.css */
.block { display: block; background: #dbeafe; }
.inline { display: inline; background: #fee2e2; }
.inline-block { display: inline-block; width: 120px; background: #dcfce7; }
.hidden { display: none; }

.row { display: flex; gap: 0.5rem; }

<div class="block">块级：独占一行</div>
<span class="inline">行内：宽度由内容决定，不能设宽高</span>
<span class="inline-block">行内块：可设宽高</span>
<span class="hidden">不可见</span>

display 取值的行为差异见表 3-1。

取值	排列	宽高设置	上下外边距	典型用途
block	独占一行	生效	生效	段落、卡片
inline	从左到右	不生效	不生效	文字中的强调、链接
inline-block	从左到右	生效	生效	标签、按钮
none	不参与	—	—	条件隐藏
contents	自身不生成盒子	—	—	语义包装

脱离流的方式对比见表 3-2。

方式	是否占位	参照物	常见问题
float	否	父容器边界	父元素高度塌陷，需清除浮动
position: absolute	否	最近的定位祖先	祖先未设 position 时相对页面
position: fixed	否	视口	移动端软键盘导致位置跳动
position: sticky	是	滚动容器	祖先有 overflow 时失效

4 验证与讨论

1. 打开页面，确认块级元素各占一行，两个行内元素并排。
2. 给行内元素加 width: 200px，观察宽度不生效；改为 inline-block 后生效。
3. 给块级元素加 float: left，观察父元素高度塌陷，再用 overflow: hidden 或 flex 修复。
4. 给子元素加 position: absolute，在不设 position: relative 的父元素上观察它跑到页面左上角。

检查项	预期结果	说明
块级换行	每个块级独占一行	文档流
行内尺寸	宽高设置无效	行内不参与盒模型尺寸
浮动塌陷	父元素高度为 0	子元素脱离流
绝对定位	相对最近定位祖先	祖先需 position: relative

讨论与局限。 浮动原本用于文字环绕，现代布局已由 Flex 与 Grid 承担；旧项目中仍需理解清除浮动。另 position: fixed 在移动端浏览器地址栏收起时会改变视口高度，需要配合 dvh 单位。

5 常见问题

现象	原因	处理
宽高设置无效	元素为 inline	改 block 或 inline-block
父元素高度为 0	子元素全部浮动或绝对定位	用 flex 容器，或清除浮动
绝对定位跑到页面角落	祖先未设定位	父级加 position: relative
隐藏后仍占位	使用了 visibility: hidden	改 display: none
行内块之间有多余空隙	HTML 换行产生空白字符	父级用 flex，或消除标签间空白

6 结论

序号	结论	依据
1	元素与流只有三种关系	图 3-1
2	inline 不能设宽高	表 3-1
3	脱离流需要处理父元素高度	表 3-2
4	现代布局优先 flex，浮动仅维护旧项目	讨论

• 上一篇：A04-盒模型
• 下一篇：A06-Flex布局
• 返回：A00-总结 ｜ 科目 README

参考文献

[1] MDN Web Docs · display 属性，https://developer.mozilla.org/zh-CN/docs/Web/CSS/display（访问于 2026-10-31）
[2] MDN Web Docs · 正常布局流，https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_flow_layout（访问于 2026-10-31）