position: absolute 元素脱离文档流导致父容器高度塌陷是 css 规范行为，非 bug；父容器 height: auto 不计算其尺寸，clearfix 等方案无效；装饰性元素无需修复，布局性元素应改用 relative + transform 或 js 动态计算。
因为 position: absolute 元素彻底脱离文档流，父盒子在布局计算阶段就“忽略”了它——这不是 bug，是 CSS 规范的明确行为。
父容器高度塌陷是必然结果，不是样式没写对
浏览器在计算父容器高度时，只考虑仍在普通文档流中的子元素。position: absolute 元素被移出流后，无论它内部有多高、图片多大、文字多长，父容器的 height: auto 都不会把它纳入计算。DevTools 里看到父容器 offsetHeight 为 0、背景色缩成一条线、下方兄弟元素直接顶上来，都是这个机制的自然表现。
- 检查父容器 computed height，大概率是
0px或极小值 -
overflow: hidden加了也没用——裁剪对象不存在，因为没有“溢出”可言 - 哪怕父容器已设
position: relative，也只是提供定位参考，不恢复文档流参与权
为什么 clearfix / overflow: hidden / display: flow-root 都无效
这些方案全为解决 float 塌陷而生，和 absolute 完全无关：
-
clearfix依赖伪元素触发 BFC 并清除浮动 —— 但absolute不浮动 -
overflow: hidden或display: flow-root虽然创建新 BFC，仍无法让父容器感知absolute子项尺寸 - 混用
float和absolute只会让定位逻辑更混乱，别试
真正能落地的三种做法，取决于语义需求
选哪条路，核心判断只有一个：“这个 absolute 元素，在内容职责上，是否本该撑开父容器？”
- 如果是装饰性元素（如右上角徽章、背景浮层），不用修——强行撑高反而违背语义
- 如果必须参与布局（如弹出菜单、翻转卡片内容区），优先改用
position: relative+transform: translate()，保持文档流参与，同时实现视觉偏移 - 如果非用
absolute不可，且父容器高度需动态匹配，只能靠 JS：ResizeObserver监听子元素尺寸变化，再手动算出实际占用区域（注意叠加top/bottom偏移和padding/border）
最容易被忽略的关键点
很多人一上来就写 parent.style.height = child.offsetHeight + 'px'，结果在响应式场景下频繁错位。真正难的不是代码怎么写，而是判断：“这个 absolute 元素，是不是真的属于这个父容器的内容流？”
如果答案是否定的，那强行让它撑高，只会让后续维护越来越累。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
