文档流是html元素默认的布局方式，块级元素垂直排列、行内元素水平排列；脱离文档流需主动干预，如float、absolute、fixed，会导致父容器塌陷、内容重叠等问题。
文档流是默认行为，脱离文档流是主动干预的结果；不理解这点，直接套用 position: absolute 或 float 很容易导致父容器塌陷、内容重叠、响应错乱。
块级元素和行内元素在文档流中怎么排？
浏览器渲染时，从上到下逐行分配空间：块级元素（如 div、p）独占一行，宽度默认撑满父容器；行内元素（如 span、a）则从左往右挨个排列，遇到父容器右边界就自动换行。
关键点在于：display 值决定元素是否参与该流——display: block、display: inline、display: inline-block 都属于文档流内布局；而一旦改用 float、position: absolute 等，就跳出这个默认规则。
- 即使给
div设置了width: 200px，它仍会占据一整行高度（由内容或height决定），只是视觉上变窄了 -
img默认是行内元素，但能设宽高，是因为它属于“替换元素”，行为接近inline-block - 父容器没设高度时，若子元素全靠
float排列，父容器高度可能变成0——这就是典型的“塌陷”现象
哪些 CSS 属性会让元素彻底脱离文档流？
真正让元素“消失于流中”的只有三类：
-
position: absolute或position: fixed：完全不占空间，后续元素当它不存在，定位基准分别是最近的非static祖先或视口 -
float: left/float: right：块级元素会脱离文档流，但文本内容仍会绕排——这是唯一一种“半脱离”且影响周围文字流的行为 -
position: sticky不脱离文档流，position: relative也不脱离（只是偏移后原占位还在）
注意：transform 和 opacity 不会让元素脱离文档流，它们只影响渲染层；而 display: none 是直接删掉渲染，不属于“脱离”范畴。
为什么父容器经常莫名其妙塌陷？
最常见原因就是子元素用了 float 或 absolute，却没做兜底处理。父容器计算高度时，只看仍在文档流中的子元素——如果一个都没剩，高度就是 0。
- 用
overflow: hidden或overflow: auto触发 BFC，可强制包含浮动子元素（但会隐藏溢出） - 在最后一个浮动子元素后加
<div style="clear: both"></div>，传统但有效 - 现代写法推荐用
display: flow-root，语义清晰且无副作用 - 绝对定位子元素无法被父容器“感知”，所以塌陷是必然结果——此时父容器本就不该依赖子元素撑高
什么时候该坚持文档流，什么时候必须脱离？
文档流适合大多数内容布局：文章段落、表单字段、卡片列表——结构清晰、可访问性好、响应式自然。脱离文档流更适合局部控制：弹窗定位、图标悬浮、侧边导航固定、图片文字环绕。
容易被忽略的一点是：脱离文档流的元素，无法触发父容器的 min-height 计算，也不会影响 flex 或 grid 容器的轨道分配。如果你在一个 display: grid 容器里对某个子项加了 position: absolute，它就不再参与网格布局了——这点在混合使用时特别容易踩坑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
