文档流是所有CSS布局的锚点，display值决定元素是否参与、如何占据空间及能否响应宽高：block独占一行可设宽高，inline同行排列忽略宽高，inline-block同行且可设全部盒模型属性，none则完全退出文档流。
文档流不是“可以忽略的默认状态”，而是所有 CSS 布局行为的锚点——你写的 flex、grid、position: absolute，全是在它之上做覆盖或脱离；不理解它，就等于在不知道地基在哪的情况下盖楼。
为什么 display: block 和 display: inline 会改变元素尺寸行为
块级元素（如 <p>、<div>）默认占满父容器宽度、自上而下堆叠，这不是标签“天生如此”，而是浏览器 UA 样式表给它们设了 display: block；同理，<span> 默认 display: inline，所以不能设 width 或 height，设了也无效。
关键在于：display 值直接决定元素是否参与文档流、如何占据空间、能否响应宽高设置：
-
display: block→ 参与正常流，独占一行，可设width/height/margin -
display: inline→ 参与正常流，水平排列，忽略width/height，只响应左右margin和padding -
display: inline-block→ 参与正常流，水平排列，但可设全部盒模型属性 -
display: none→ 完全退出文档流，不占空间，也不渲染
常见错误：用 <div class="btn"> 替代 <button>，又没重置 display，结果按钮在行内场景中换行或撑宽——因为 <div> 默认是 block，而 <button> 默认是 inline-block。
立即学习“前端免费学习笔记（深入）”；
脱离文档流的三种典型方式及其副作用
真正需要“精准控制位置”时，才该考虑脱离文档流。但每种方式都带来明确代价，不能无脑套用：
-
float: left/right：元素脱离正常流，但文本仍会环绕它；必须配合clear防止后续块级元素上浮，否则父容器高度塌陷（常见于导航栏、图文混排） -
position: absolute或fixed：完全脱离文档流，不占空间，定位参考是最近的已定位祖先（position不为static）；若祖先没设定位，就回退到<html>，极易导致错位 -
position: relative：不脱离文档流，原位置仍被保留；只是视觉偏移，常用于微调或作为absolute子项的定位上下文
注意：sticky 是相对 + 固定的混合体，但它依赖父容器有滚动区域，且必须设 top/bottom 才生效；在无滚动的页面里，它表现和 relative 一样。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
box-sizing: border-box 对文档流布局的实际影响
默认 box-sizing: content-box 下，width: 300px; padding: 20px; border: 1px 的元素实际占用宽度是 342px——这会让基于文档流的等宽排列（比如三列 float 或 inline-block）直接溢出容器，尤其在移动端窄屏下触发横向滚动条。
全局加这一句就能大幅降低排版误差：
*, *::before, *::after {
box-sizing: border-box;
}但它对以下情况无效或需额外处理：
-
flex项的flex-basis计算仍以content-box为基准（除非显式设box-sizing） -
grid的gap是独立间距，不受box-sizing影响，但子项自身的margin会和gap叠加 - 表单控件（如
<input>）部分浏览器 UA 样式未统一应用border-box，建议单独重置
流式排版中，文档流如何与 %、rem、vw 协同工作
流式排版不是抛弃文档流，而是让文档流里的元素“自然伸缩”。核心逻辑是：容器靠相对单位定义弹性范围，内容靠文档流默认行为填充。
例如一个响应式卡片组：
- 父容器用
width: 90%; max-width: 1200px; margin: 0 auto;—— 宽度随视口变，但有上下界 - 卡片用
display: inline-block或display: flex排列，本身不设固定宽，靠内容撑开或用flex: 1均分 - 图片加
max-width: 100%; height: auto;，确保不突破父容器，同时保持比例 - 字体用
font-size: clamp(1rem, 2.5vw, 1.25rem);，让字号在小屏、中屏、大屏间平滑过渡
最容易被忽略的一点：当用 % 设置子元素宽度时，它的百分比是相对于**包含块（containing block）** 的宽度计算的——而这个包含块，绝大多数时候就是文档流中上一个已定位/块级父容器。如果中间某层被设了 position: absolute 或 display: inline，包含块就可能意外跳变，导致百分比失效。
