position: absolute 元素脱离文档流，父容器高度为0是规范行为而非bug；clearfix等方案对absolute无效；装饰性元素无需处理，必须参与布局时优先用relative+transform，否则需js动态计算。
因为 position: absolute 的元素彻底脱离文档流，父元素在布局计算阶段直接忽略它——这不是 bug，是 CSS 规范明确要求的行为。
父容器 height 为 0 的真实表现
你看到的不是渲染异常，而是布局引擎按规范执行的结果：
-
offsetHeight、getBoundingClientRect().height读出来确实是0 - DevTools 中父元素的
height显示为0px，背景色/边框不展开 - 紧随其后的兄弟元素直接“贴”到顶部，仿佛父容器不存在
- 即使子元素设置了
top: 0; bottom: 0; height: 100%，父容器依然无感
为什么 clearfix / overflow: hidden / display: flow-root 都没用
这些方案全是为 float 塌陷设计的，和 absolute 完全无关：
-
clearfix依赖伪元素触发 BFC 并清除浮动 —— 但absolute不浮动，也不参与 BFC 高度计算 -
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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
