position: absolute 导致父容器高度塌陷不是 bug，而是规范行为，因其使子元素脱离文档流；clearfix、overflow: hidden、display: flow-root 均无效，因它们针对浮动或 bfc，不适用于 absolute 元素。
position: absolute 导致父容器高度塌陷不是 bug，是规范行为——它让子元素彻底脱离文档流，父容器自然“看不见”它。所有为 float 设计的方案（如 clearfix、overflow: hidden、display: flow-root）对 absolute 完全无效，硬套只会浪费调试时间。
为什么 clearfix / overflow / flow-root 都不生效
这些方案本质是触发 BFC 或插入占位元素来包裹浮动内容，但 absolute 元素既不浮动、也不参与 BFC 高度计算。你加了 .clearfix，DevTools 里能看到伪元素，但它清的是“浮动”，而你的子元素根本没浮——所以父容器还是 0px 高。
-
clear: both写在父元素上：父元素自己没浮动，该声明无意义 -
overflow: hidden：能创建 BFC，但依然无法感知absolute元素尺寸，还可能裁剪弹层或阴影 -
display: flow-root：专为float而生，对absolute子项零作用
判断是否真需要撑高父容器
先问一句：这个 position: absolute 元素，是不是父容器“内容逻辑”的一部分？
- 装饰性用途（右上角徽章、背景浮层、加载动画）→ 不该撑高父容器，保持原样即可
- 功能性内容（翻转卡片背面、弹出菜单、模态框主体）→ 必须参与高度计算，此时应放弃
absolute
强行用 JS 或 CSS “修复”一个本不该撑高的容器，只会让语义混乱、后续维护困难。
真正有效的三种落地方式
按优先级排序，选哪个取决于语义和控制粒度：
- 改用
display: flex或display: grid+align-self/justify-self：语义清晰、自动参与高度计算，多数“必须绝对定位”的场景其实只是想对齐，完全可替代 - 改用
position: relative+transform: translate()：保留定位意图，但元素仍在文档流中，父容器能正常感知高度 - JS 动态计算并设置高度：仅当非用
absolute不可（如复杂动画层叠、第三方库限制），需遍历所有absolute子元素，取el.offsetTop + el.offsetHeight最大值，并计入padding和border；响应式下必须监听ResizeObserver，不能只靠DOMContentLoaded
用 padding 占位是最容易被低估的纯 CSS 方案
当子元素位置固定、尺寸可控时，比写死 height 更安全：
-
padding-bottom: 24px比height: 24px强：不阻断溢出，兼容字体缩放和响应式变化 - 若父容器已有
border，可用border-bottom: 24px solid transparent复用占位 - 注意：这会让父容器实际占用空间变大，如果周围是
flex布局或带margin，可能影响对齐
最常被忽略的点是：很多人一上来就写 parent.style.height = child.offsetHeight + 'px'，却忘了 offsetTop 和 bottom 定位的元素需要反推实际占位——塌陷本身不难修，难的是判断“它到底该不该被修”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
