文档流是html元素默认的布局方式：块级元素垂直堆叠、行内元素水平排列、行内块元素水平排列且可设宽高；脱离文档流（如float、absolute）会使元素不再参与空间分配，导致父容器塌陷或内容重叠。
HTML 元素默认按文档流（Normal Flow）排列，不是“随便排”，而是有明确规则可循——块级元素垂直堆叠、行内元素水平排列、行内块元素水平但可设宽高。脱离这个流的写法（比如 float 或 position: absolute）会直接改变其他元素的占位逻辑，不是“样式变了”，而是“空间被拿走了”。
块级元素怎么排？为什么总是一行一个？
块级元素（如 <div>、<code><p></p>、<h1></h1>）默认 display: block，浏览器渲染时会：从上到下依次放置，每个独占一行；宽度自动撑满父容器，高度由内容或显式设置决定。
- 即使你没写
width: 100%，它也默认占满父级宽度 -
margin-top和margin-bottom会生效，且可能发生外边距合并（margin collapse） - 想让它“不独占一行”？要么改
display（比如inline-block），要么用float或 Flex/Grid 布局——但后者本质是脱离或重构文档流
行内元素为啥不能设宽高？又为啥挤在一行？
行内元素（如 <span></span>、<strong></strong>、<a></a>）默认 display: inline，它们不占据整行空间，只“包裹内容”，所以：
-
width和height设置无效（除非改成inline-block或block） -
margin-top/margin-bottom不影响上下布局，但margin-left/margin-right有效 - 多个行内元素会从左往右排，写满一行后自动换行——这个“换行”是浏览器根据父容器宽度和字体尺寸算出来的，不是 CSS 控制的
flex-direction 改了，justify-content 就失效？
不是失效，是作用轴变了。很多人写了 display: flex 后发现 justify-content: center 没反应，其实是忘了 flex-direction 的影响：
- 默认
flex-direction: row→ 主轴水平 →justify-content控制左右对齐 - 改成
flex-direction: column→ 主轴变垂直 →justify-content就控制上下对齐，此时想水平居中得用align-items: center -
justify-content永远只管主轴，align-items永远只管交叉轴——二者角色随flex-direction动态切换
浮动和绝对定位让其他元素“挤过去”，到底发生了什么？
根本原因是它们脱离了文档流，不再参与父容器的高度计算和兄弟元素的空间分配：
-
float: left是“部分脱离”：元素移出流，但文本等内容仍会环绕它；父容器若没清除浮动，高度会塌陷为 0 -
position: absolute是“完全脱离”：元素从文档流中彻底移除，后续元素直接填补它原来的位置，就像它不存在一样 -
position: relative不脱离流：只是视觉偏移，原始占位还在，不影响其他元素排布
真正容易被忽略的是：脱离文档流的元素，其父容器若没有触发 BFC（比如加 overflow: hidden），就大概率出现高度塌陷——这不是 bug，是规范行为。
