文档流是HTML默认布局基础，块级元素垂直排列、行内元素水平排列；脱离文档流有浮动、绝对定位、display:none三种方式，效果各异；现代布局应优先使用Flex和Grid增强控制而非替代文档流。
文档流是默认布局的起点，不是障碍
所有 HTML 元素一上来就在文档流里，这不是 bug，是设计前提。块级元素（如 div、p）自上而下占满整行；行内元素（如 span、a）从左到右挤着排，空间不够就换行。你不需要“对抗”它，只需要知道什么时候该让它继续，什么时候该主动离开。
常见错误现象：div 堆叠得太高、文字和图片错位、父容器高度塌陷成 0 —— 这些往往不是文档流的问题，而是你中途改了规则却没交代清楚。
- 别用
float做主布局：它会脱离文档流，但又不提供尺寸反馈，父容器无法感知子项存在 -
position: relative不脱离文档流，适合微调位置（比如让按钮下移 2px），同时保留原占位 - 想让某个元素“不占位但还在”，用
visibility: hidden；想“彻底消失且腾出空间”，才用display: none
绝对定位必须配合相对定位父容器
写 position: absolute 却没给父元素加 position: relative，是最常被忽略的定位失效原因。浏览器会逐级往上找第一个有定位上下文的祖先，找不到就落到 body 上——结果就是元素飞到页面角落，还查不出为什么。
使用场景：弹窗遮罩层、下拉菜单、tooltip 提示框。这些本就不该参与常规流布局，需要精确锚定在某个触发点附近。
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 父相子绝不是可选技巧，是强制协作关系；
position: static（默认值）的父元素对absolute子项无效 - 垂直居中别写
top: 50%; margin-top: -20px，字体缩放或换设备后就偏了；用top: 50%; transform: translateY(-50%)更可靠 - 避免在
display: flex容器里混用absolute子项：它既不参与 flex 分配，又可能盖住其他内容，调试时很难判断层级来源
脱离文档流的三种方式，效果完全不同
浮动（float）、绝对定位（position: absolute/fixed）、display: none 都会让元素“不见”，但背后机制天差地别：
-
float：元素脱离文档流，但文本和行内内容仍会环绕它；后续块级元素会上移填补空缺，容易导致父容器塌陷 -
position: absolute：完全脱离文档流，不占位、不撑高父容器、不影响兄弟元素布局，只依赖定位上下文 -
display: none：元素从渲染树中直接删除，不占空间、不可交互、触发重排；比visibility: hidden开销更大，但更彻底
性能影响不能只看“快慢”：频繁切换 display: none 会反复触发重排，而 opacity: 0 走合成层，更适合做动画隐藏；但 opacity: 0 的元素仍能接收点击事件，这点常被忽略。
现代布局优先用 Flex 和 Grid，不是因为它们更炫
Flex 和 Grid 不是替代文档流，而是对文档流的增强控制。它们内部依然遵循流式逻辑（比如 flex-direction: row 就是横向流），但把“怎么流”交由开发者显式定义。
常见错误：.container { display: flex; } 写了，但子元素没设 flex 相关属性，结果还是块级堆叠——因为 Flex 容器只影响直系子项，不自动接管嵌套结构。
- 三栏布局别再用
float: left+clear: both：用flex: 0 0 240px控制侧边栏固定宽，flex: 1让主内容自适应 - 导航栏右对齐某一项，用
margin-left: auto推开前面所有项，比float: right或text-align: right更稳定 - Grid 中别手动写每行的
grid-row：用grid-auto-flow: dense和命名区域（grid-template-areas）让浏览器自动分配，才是弹性本质
真正难的不是记住语法，而是判断哪个元素该留在流里、哪个该抽出来、哪个该交给 Flex/Grid 统一调度——这个决策点，比写对一行 justify-content: center 更关键。
