一：定义

CSS 中的文档流（Normal Flow）是浏览器默认的页面元素布局规则，决定了元素在没有 CSS 干预时如何自动排列

二：类型

（一）正常文档流

1：顺序排列=>元素按照 HTML 的书写顺序依次渲染

2：块级元素=>独占父容器的一整行，宽度默认撑满父容器，高度由内容决定

3：行内元素=>共享一行空间，宽度由内容撑开，无法直接设置 width/height 或上下 margin/padding

（二）：脱离文档流

1：浮动=>元素向左/右浮动，后续内容会“环绕”它

2：绝对定位=>元素相对于最近的定位祖先元素

3：固定定位=>元素相对于浏览器视口定位，不随页面滚动移动

三：脱离文档流影响

1：父元素高度坍塌=>子元素浮动或绝对定位后，父元素高度可能变为 0

2：布局重叠=>脱离流的元素可能遮挡正常流内容，需通过 z-index 控制层叠顺序

四：恢复文档流方法

1：清楚浮动=>使用 clear: both 或父元素触发 BFC

2：重置定位=>将 position 改为 static（默认值）或调整定位方式

五：代码

<!-- 正常流：三个 div 垂直排列 -->
<div style="background: #eee;">块级元素1</div>
<div style="background: #ccc;">块级元素2</div>

<!-- 脱离流：两个浮动 div 并排，父元素高度塌陷 -->
<div style="float: left;">浮动元素</div>
<div style="position: absolute;">绝对定位元素</div>

六：拓展

1：BFC(块级格式化上下文)：独立布局环境，内部元素不影响外部

2：层叠上下文：z-index 仅在定位元素（非 static）生效，控制重叠顺序