脱离文档流是主动切换布局机制，但易引发父容器塌陷、定位基准偏移、文本绕排等连锁问题，需手动补全高度、顺序、可访问性等隐含约定。
脱离文档流不是“出错”，而是你主动触发了布局机制的切换——但多数维护问题，都源于没意识到这个切换带来的连锁反应。
为什么父容器高度突然变成0？
这是最常被当成 bug 的现象，实际是浏览器在按规则执行：当子元素用了 position: absolute 或 position: fixed，它就从父容器的高度计算中被剔除了。父容器只看还留在文档流里的子元素，如果一个都没剩，高度就是 0。
- 常见诱因：
absolute弹窗、fixed返回顶部按钮、float导航栏 - 别指望
overflow: hidden能“修复”absolute带来的塌陷——它只对float有效（靠触发 BFC） -
display: flow-root对float有效，但对absolute/fixed没作用
定位上下文（containing block）找不到是谁的锅？
top/left 不是相对于父 div，而是相对于最近的「已定位祖先」——即 position 值为 relative、absolute、fixed 或 sticky 的祖先。很多人写了 position: absolute 却没给父级加 position: relative，结果元素直接飞到 <html> 顶部左上角。
- 检查父级是否真有非
static的position声明（哪怕只是position: relative，不写top/left也行） - 注意：父级若带
transform、filter或will-change，在多数浏览器里也会创建新的 containing block，导致定位基准意外偏移 -
position: sticky不会创建新 containing block，但它依赖父容器有可滚动区域才能生效
float 后文本绕排 vs 其他元素“看不见”它
float 是唯一一种“半脱离”文档流的方式：块级兄弟元素会无视它、直接往上顶，但段落内的文字仍会绕开它排列。这种不对称行为，是很多老项目布局错乱的根源。
立即学习“前端免费学习笔记（深入）”；
- 浮动元素不撑父高 → 父容器塌陷 → 后续内容叠上来
- 清除浮动的老办法
<div style="clear: both"></div>仍可用，但语义弱；display: flow-root更干净，且无溢出隐藏副作用 - 现代布局优先用
flex或grid替代float实现横向排列——它们不脱离文档流，也不引发塌陷或绕排歧义
真正难维护的不是“怎么让它脱离”，而是“脱离之后，哪些地方还在依赖它原本占的位置”。文档流是默认契约，一旦打破，就得手动补全所有隐含约定——高度、顺序、可访问性、响应式行为，全都得重新校准。
