文档流是css布局的坐标系原点，display值决定元素是否参与流、如何占位及能否响应宽高；relative保留原始占位仅视觉偏移，absolute则完全脱离流并相对最近非static祖先定位。
文档流不是“默认背景”，而是所有 CSS 布局行为的坐标系原点——你写的 display: flex、position: absolute、float，全是在它之上做覆盖、偏移或退出；不锚定它，就等于在没标刻度的尺子上量长度。
为什么 display 值直接决定元素能否响应 width 和 height
浏览器 UA 样式表给 <p></p>、<div> 默认设了 <code>display: block，所以它们独占一行、可设宽高；给 <span></span>、<strong></strong> 设的是 display: inline，所以垂直方向的 margin 无效、width/height 被忽略。
这不是标签“天生如此”，而是 display 值在控制三件事：
- 是否参与文档流（
none完全退出，absolute脱离但保留定位上下文） - 如何占据空间（
block垂直堆叠，inline水平排列） - 能否响应盒模型属性（
inline-block是唯一既同行又支持全部width/height/margin的常见值）
常见错误：用 <div class="btn"> 替代 <code><button></button>，又没显式设 display: inline-block 或 flex，结果按钮在导航栏里换行或撑宽——因为 <div> 默认是 <code>block，而原生 <button></button> 是 inline-block。
float 脱离文档流但不完全退出，为什么父容器会塌陷
float: left 或 right 让元素脱离正常流，但它仍影响文本流中的内联内容（比如段落文字会绕着它排），同时不再参与父容器的高度计算。
这意味着：
- 父容器若没设高度，且子元素全浮动，它的
height会坍缩为0 - 后续块级兄弟元素会上浮到浮动元素原来的位置，造成布局错乱
-
clear: both不是“清浮动”，而是强制元素下移到所有浮动元素下方，它本身不修复父容器塌陷
真正让父容器重新获得高度的方法，是触发 BFC（Block Formatting Context）：overflow: hidden、display: flow-root（推荐）、或伪元素 ::after { content: ""; display: table; clear: both; }。
position: relative 和 absolute 对文档流的影响差异极大
position: relative 不脱离文档流：元素原始位置仍被保留，只是视觉上偏移；它常作为 absolute 子项的定位参考（即“最近的已定位祖先”）。
position: absolute 则完全脱离文档流：不占空间、不影响其他元素布局，定位参考是最近的 position 不为 static 的祖先；如果找不到，就回退到 根元素——这在嵌套组件中极易导致错位，尤其当父组件未设 position: relative 时。
注意：position: sticky 是混合体：它在滚动前表现如 relative，滚动后才像 fixed；但它生效的前提是父容器有滚动区域，且必须指定 top 或 bottom ——否则它就退化成 relative。
box-sizing: border-box 如何防止文档流中等宽排列溢出
默认 box-sizing: content-box 下，width: 300px; padding: 20px; border: 1px 的元素实际宽度是 342px。这在基于文档流的多列布局（比如三列 inline-block 或 float）中会直接导致最后一列换行或横向滚动条。
解决方法很简单，但必须全局统一：
- 在重置样式或基础 CSS 中加
* { box-sizing: border-box; } - 避免对部分元素单独改
box-sizing，否则父子计算不一致，容易引发尺寸错位 - 特别注意表单控件（
<input>、<select></select>）在某些浏览器中 UA 样式仍为content-box，需显式覆盖
极致排版中真正难的不是写炫技效果，而是确保每个元素在文档流中“站得稳、算得准”——一旦基础锚点漂移，后续所有定位、弹性、网格布局都会在不可见处悄悄失准。
