HTML文档流是浏览器渲染时真实执行的排版逻辑，决定元素默认位置；脱离文档流需主动干预，如float、absolute、fixed，会导致父容器塌陷、内容重叠等问题。
HTML文档流不是抽象概念，而是浏览器渲染时真实执行的排版逻辑：它决定每个元素“默认坐在哪”，而所有脱离行为（float、position: absolute、position: fixed）都是对这个默认坐标的主动干预。
块级元素为什么总独占一行？
因为浏览器在渲染时，为每个块级元素（如 div、p、h1）分配一个“垂直轨道”——它从上一行结束处开始，向下延伸出足够容纳自身内容的高度，再把下个块级元素“推到下一条轨道”。这个过程不看父容器有没有设 height，也不管你给它加了 width: 200px 还是 margin: 10px，只要它是块级且没脱离流，就一定占一整行高度（哪怕视觉上很窄）。
常见错误现象：
- 给
div设了width: 300px和margin: 0 auto，却发现左右没居中——其实是父容器没设宽度，div仍按默认 100% 宽度参与计算，margin: auto失效 - 两个
div紧挨着写，中间却有 20px 空隙——大概率是margin-collapse（外边距合并），不是“多了一行”
img 是行内元素，为啥能设宽高？
因为 img 是“替换元素”（replaced element），它的尺寸由内容（图片文件）或 CSS 显式控制，行为更接近 display: inline-block。它虽在行内流中排列，但浏览器会为其预留可计算的空间，所以 width/height 有效，vertical-align 也起作用。
立即学习“前端免费学习笔记（深入）”；
但注意：margin-top 和 margin-bottom 对纯行内元素（如 span）依然无效——它们不会推开上下行的内容；只有当元素变成 inline-block 或被包裹进块级上下文后，垂直外边距才真正生效。
哪些操作会让元素“彻底消失于流中”？
真正让后续元素完全无视其存在、连文本绕排都不做的，只有三类：
-
position: absolute或position: fixed：元素完全脱离流，定位基准取决于最近的已定位祖先（position值为relative、absolute、fixed或sticky）；若找不到，就相对于body或视口 -
float: left/float: right：块级元素脱离流，但文字和行内元素仍会绕排——这是唯一“半脱离”且影响周围文本流的行为 -
display: none：不是脱离流，是直接不渲染，DOM 节点还在，但布局引擎完全忽略它
容易踩的坑：
- 父容器没设
position: relative，子元素用position: absolute后“飞到页面左上角”，其实是相对于body定位 - 给父元素加
position: absolute，结果整个子结构塌陷——因为父元素自己先脱离流了，子元素的定位上下文失效 - 用
transform: translate()移动元素，发现它“看起来动了但还占位”——没错，transform不影响文档流，只是视觉层偏移
父容器塌陷到底是因为什么？
塌陷本质是父容器高度计算失败：当所有子元素都脱离文档流（比如全用 float 或全用 position: absolute），父容器在流中“看不见”任何子内容，于是高度退化为 0（除非显式设了 height 或 min-height）。
解决方式不是硬加高度，而是让父容器“感知”到子元素的存在：
- 对父容器用
overflow: hidden或overflow: auto（触发 BFC） - 在父容器末尾加一个清除浮动的伪元素：
::after { content: ""; display: table; clear: both; } - 改用现代方案：父容器设
display: flex或display: grid，天然不塌陷
最常被忽略的一点：塌陷只发生在“父容器本身也在文档流中”时；如果父容器自己已经 position: absolute，那它本就不参与高度计算，谈不上塌陷——问题根源往往在层级判断错了。
