绝对定位子元素导致父容器高度塌陷不是bug而是css规范行为，因其脱离文档流；clearfix、overflow:hidden、display:flow-root均无效，因它们仅处理浮动；应改用flex/grid、relative+transform、js计算或css占位方案。
绝对定位子元素导致父容器高度塌陷不是 bug，是 CSS 规范行为——position: absolute 让元素彻底脱离文档流，父容器自然“看不见”它。所有试图用 clearfix、overflow: hidden 或 display: flow-root “修复”的做法都无效，因为它们只针对浮动，和 absolute 无关。
为什么 overflow / flow-root / clearfix 都不生效
这些方案本质是触发 BFC 或插入占位元素来包裹浮动内容，但 position: absolute 元素既不浮动、也不参与 BFC 高度计算。
-
clearfix的::after伪元素清的是浮动，而你的子元素根本没浮——父容器还是 0px 高 -
overflow: hidden虽然创建了 BFC，但依然无法感知absolute元素的尺寸，还可能意外裁剪弹层或阴影 -
display: flow-root是为 float 设计的，对absolute子项零作用
先判断：这个 absolute 元素该不该撑高父容器
强行让父容器被装饰性元素撑开，只会让语义混乱、后续维护困难。
- 右上角徽章、背景浮层、加载动画 → 不该撑高，保持原样即可
- 翻转卡片背面、弹出菜单主体、模态框内容区 → 必须参与高度计算，此时应放弃
position: absolute
真正有效的三种落地方式（按优先级）
选哪个取决于语义和控制粒度：
- 改用
display: flex或display: grid：justify-content+align-items就能实现居中/贴边，且自动参与高度计算；例如.parent { display: flex; justify-content: flex-end; align-items: flex-start; }，子元素就自动贴右上角 - 改用
position: relative+transform: translate()：保留定位意图，但元素仍在文档流中，父容器能正常感知高度 - JS 动态计算并设置高度：仅当非用
position: absolute不可（如复杂动画层叠、第三方库限制），需遍历所有absolute子元素，取el.getBoundingClientRect().bottom最大值，减去父容器getBoundingClientRect().top，再加padding-top和border-top；响应式下必须监听ResizeObserver，不能只靠DOMContentLoaded
纯 CSS 占位方案：padding-bottom 或伪元素
当子元素位置固定、尺寸可控时，比写死 height 更安全：
-
padding-bottom: 24px比height: 24px强：不阻断溢出，兼容字体缩放和响应式变化 - 若父容器已有
border，可用border-bottom: 24px solid transparent复用占位 - 伪元素
::after { display: block; height: 24px; }效果等同于空div，但更轻量
注意：这些方案会让父容器实际占用空间变大，如果周围是 flex 布局或带 margin，可能影响对齐。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
