html文档流是浏览器渲染引擎强制执行的排布逻辑，块级元素垂直堆叠源于ua样式表预设display: block，行内元素换行由容器宽度与字体度量等实时计算，脱离文档流仅通过float、absolute/fixed、display: contents实现，内容从不进入文档流。
HTML 文档流不是“默认开启的某种模式”，而是浏览器渲染引擎在构建布局阶段**强制执行的排布逻辑**——只要没被显式干预，所有元素就按这个规则落位。
块级元素垂直堆叠是 UA 样式表的硬编码行为
浏览器内置的用户代理（UA）样式表给 <div>、<code><p></p>、<h1></h1> 等标签预设了 display: block。这不是语义决定的，是 CSS 规范强制要求的初始值。
- 即使你删掉所有 CSS，两个相邻
<div> 依然上下排列，不是因为“它们天生该这样”，而是因为 UA 给它们打了 <code>display: block的烙印 -
<img>默认是display: inline，所以多个<img>会水平排列；但加个display: block就立刻换行 - 给
<span></span>设width或height无效，不是 bug，是display: inline的规范行为：它不响应盒模型尺寸控制 - 换行点不只看空格或换行符，还取决于字体度量、
word-break、white-space等设置 -
<pre class="brush:php;toolbar:false;"></pre>里文本保留原始换行，是因为它的white-space: pre覆盖了默认的normal - 多个
<img>并排出现间隙，不是 margin，是 HTML 解析时把换行符/空格转成了空白字符节点，被当作普通文本处理 -
float: left或float: right：块级元素脱离流，但文本仍绕排；父容器高度塌陷需clear或 BFC 修复 -
position: absolute或position: fixed：完全脱离，定位基准取决于最近非static祖先；若无，则回退到或视口 -
display: contents：移除自身盒模型，子节点直接融入父流——它不渲染盒子，但子节点仍参与流 - 直接操作
template.content只能 append 一次，第二次会失败——节点已被移走 -
<template></template>内的<style></style>或<script></script>完全静默，不会执行也不会注入样式 - 克隆后插入到
flex容器中，子项按 flex 规则排列；插入到普通<div> 中，则立即回归标准流——流规则由插入目标决定，而非模板本身 <p>真正容易被忽略的是：文档流不是“可选背景”，它是所有布局技术（flex/grid/position）的参照系。一旦搞错锚点，比如在已用 <code>display: flex的父容器里还指望子元素靠margin垂直对齐，问题就出在默认流已被覆盖，却还在用流思维调试。
行内元素换行由容器宽度 + 字符位置实时计算
行内元素（<span></span>、<a></a>、<strong></strong>）不生成独立行框，而是在当前行内逐字符/逐节点填充，直到剩余空间不足才折行。
脱离文档流的三种真实生效路径
只有明确触发以下任一机制，元素才真正“消失”于流中：后续元素当它不存在，父容器不再为它预留空间。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
注意：position: relative 和 transform 不脱离文档流，原占位始终存在；display: none 是直接剔除渲染，不属于“脱离”范畴。
<template></template> 的内容从不进入文档流
<template></template> 不是“隐藏的流区域”，它的子节点在 DOM 构建阶段就被剥离主树，不参与样式计算、不触发 layout、offsetTop 恒为 0。
