父容器高度塌陷是第一个明显信号，因absolute/fixed元素脱离文档流导致父容器高度为0，引发背景不显示、边框消失、后续元素重叠等问题；这不是bug而是规范行为，overflow:hidden和display:flow-root对此无效。
父容器高度塌陷是第一个明显信号
只要子元素用了 position: absolute 或 position: fixed，它就从父容器的高度计算中被剔除。父容器只看还留在文档流里的子元素——如果一个都没剩，height 就是 0。常见现象包括背景色不显示、边框看不见、后续块级元素直接叠上来。
这不是 bug，是浏览器按规范执行的结果。别指望 overflow: hidden 能“修复”它：这个声明对 float 有效（靠触发 BFC），但对 absolute/fixed 完全无效。
-
display: flow-root对float有用，对absolute没作用 - 给父容器硬写
height或min-height只适合内容高度固定场景，响应式下极易出错 - JS 动态读取子元素
offsetHeight并赋值给父容器style.height可行，但得监听resize和 DOM 变更
定位上下文（containing block）经常找错对象
top/left 不是相对于父 div，而是相对于最近的「已定位祖先」——即 position 值为 relative、absolute、fixed 或 sticky 的祖先。很多人写了 position: absolute 却没给父级加 position: relative，结果元素直接飞到 顶部左上角。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
还要注意：父级若带 transform、filter 或 will-change，在多数浏览器里也会创建新的 containing block，导致定位基准意外偏移；而 position: sticky 不会创建新 containing block，但它依赖父容器有可滚动区域才能生效。
float 是唯一“半脱离”文档流的方式
float: left 或 float: right 让块级元素脱离文档流，但段落内的文字仍会绕开它排列。这种不对称行为，是很多老项目布局错乱的根源：
- 浮动元素不撑父高 → 父容器塌陷 → 后续内容叠上来
-
clear: both的传统清除方式仍可用，但语义弱；display: flow-root更干净，且无溢出隐藏副作用 - 现代布局优先用
flex或grid替代float实现横向排列——它们不脱离文档流，也不引发塌陷或绕排歧义
脱离之后最难补的是隐含约定
文档流是默认契约。一旦打破，就得手动补全所有隐含约定：高度、顺序、可访问性、响应式行为，全都得重新校准。真正难维护的不是“怎么让它脱离”，而是“脱离之后，哪些地方还在依赖它原本占的位置”。比如弹窗遮盖了焦点管理逻辑、fixed 返回按钮干扰了屏幕阅读器的阅读顺序、sticky 导航在缩放后失效——这些问题往往不报错，但用户感知强烈。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
