position: absolute 元素脱离文档流，父容器无法感知其尺寸，导致高度塌陷；clearfix、overflow:hidden 等方案仅解决浮动塌陷，对 absolute 无效；应根据语义判断是否需撑高父容器，装饰性元素无需处理，必要时改用 relative + transform 或 js 动态计算。
因为 position: absolute 的元素完全脱离文档流，父元素在计算自身高度时根本“看不见”它——这不是 bug，是 CSS 规范行为。所以别指望靠它撑开父容器，得主动干预。
父容器高度塌陷的典型表现
你看到的不是错觉：height: auto 的父容器在 DevTools 里显示 0px；背景色/边框不展开；下方兄弟元素直接贴到顶部；offsetHeight 或 getBoundingClientRect().height 读出来也是 0。这些现象背后只有一个原因：父容器没把 absolute 子元素当自己人。
为什么 clearfix / overflow: hidden / display: flow-root 都无效
这些方案全是为解决 float 塌陷设计的，和 absolute 毫无关系：
-
clearfix依赖::after伪元素触发 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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
