html文档流是浏览器默认渲染逻辑：块级元素垂直独占一行，行内元素水平并排排列；脱离文档流需主动干预，如float、absolute等，会导致父容器塌陷、内容重叠等问题。
HTML文档流不是抽象概念，它是浏览器渲染时实实在在执行的默认排布逻辑：块级元素从上到下独占一行，行内元素从左到右挤在当前行里——不写任何CSS，这个规则就生效。
块级元素默认垂直排列，且每行只容一个
像 <div>、<code><p></p>、<h1></h1>、<section></section> 这类元素，天生“占满整行”，后面紧挨着的另一个块级元素会自动换到下一行，不会并排。这不是靠 margin 或 display 挤出来的，是初始渲染行为。
常见错误现象：display: inline 后没生效？可能父容器用了 flex 或 grid，覆盖了默认流；或者元素被 float 或 position: absolute 脱离了流，此时它不再参与块级垂直排列。
- 不要指望两个相邻
<div> 默认横向并排——它们会垂直堆叠 <li> <code><hr>和<pre class="brush:php;toolbar:false;"></pre>也属于块级，默认各占一行 - 即使
<div> 里只有一行文字，它仍占据一整行高度（由 line-height、padding 等决定） <h3>行内元素默认水平排列，换行由容器宽度决定</h3> <p><code><span></span>、<a></a>、<em></em>、<strong></strong>、<i></i>这些元素不会打断行流，它们像文字一样“嵌”在当前行中，从左往右逐个放置，直到容器右边界，再折到下一行。使用场景：做文字高亮、链接穿插、小图标内联等，适合不希望破坏段落结构的操作。
-
<img>是行内元素（但有宽高），所以多个<img>默认水平排列，中间有空白（来自换行符或空格） - 行内元素设
width/height无效，除非先转成inline-block或block -
vertical-align对行内元素生效，但对块级元素无作用（除非其父是 table-cell 或 flex）
<template></template>内容不参与文档流，但克隆后立刻服从流规则<template></template>不是“特殊流区域”，而是“未挂载快照”。它的子节点在解析阶段就被移出主 DOM 树，不计算样式、不触发 layout、offsetTop恒为 0、getComputedStyle返回空对象——这都不是 bug，是规范强制行为。容易踩的坑：
- 直接
template.content.appendChild(...)只能用一次，第二次 append 会失败（节点已被移走） - 在
<template></template>里写<style></style>或<script></script>，它们不会执行，也不会影响页面样式 - 克隆后插入到
flex容器中，子元素按 flex 规则排列；插入到普通<div> 中，则回归标准流——流规则取决于插入点，而非模板本身 <h3>脱离文档流的常见操作及其副作用</h3> <p>真正让元素“消失于流中”的，只有明确干预行为：<code>float: left/right、position: absolute、position: fixed、display: contents（移除自身盒模型）。这些操作会让元素不再占据空间，导致父容器塌陷、后续内容上移、布局错位。典型表现：
- 父
<div> 高度为 0，里面全是 <code>float子项——因为浮动元素已脱标，父容器“看不见”它们 -
position: absolute元素的top: 0是相对于最近的定位祖先，不是文档流顶部；若祖先没设position: relative，就会一直往上找，甚至跑到顶上去 -
display: none不是脱离文档流，是彻底不渲染；而visibility: hidden仍在流中占位
理解文档流的关键，是始终分清“浏览器默认怎么做”和“你手动改了什么”。一旦加了 float、absolute、flex、grid，你就已经切换了布局上下文——别再用流的直觉去猜结果。
- 父
-
