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