绝对定位元素使父容器高度为0，因其彻底脱离文档流，父容器计算高度时完全“看不见”它们；这是css规范行为，非bug。常见现象包括offsetheight为0、背景不显示、兄弟元素上移；clearfix等浮动清除方案无效。
为什么绝对定位元素会让父容器高度变成 0
因为 position: absolute 的元素彻底脱离文档流，父容器在计算自身 height 时根本“看不见”它——这不是 bug，是 CSS 规范明确要求的行为。
常见错误现象包括：getBoundingClientRect().height 或 offsetHeight 读出来是 0，背景色/边框不显示，下方兄弟元素直接顶到顶部；DevTools 里盒模型显示 height: 0px，但视觉上子元素明明占着空间。
注意：overflow: hidden、display: flow-root、clearfix 全都无效——它们解决的是浮动（float）塌陷，和 absolute 无关。
哪些场景下父容器“本就不该被撑开”
不是所有塌陷都要修复。关键先判断：这个 absolute 子元素是否属于父容器的“内容流”？
- 右上角小红点、背景装饰层、弹窗遮罩层 —— 它们只是视觉覆盖，父容器高度本就不该依赖它们
- 翻转卡片的正反面都设了
position: absolute，但卡片容器本身需要响应内容高度 —— 这时塌陷就是问题，得干预 - 轮播图每页滑块（
glide__slide）内部全是absolute元素，但整个轮播区域要靠它撑开高度 —— 必须让父容器“感知”到实际占用空间
用 getBoundingClientRect() 动态算高度时容易漏掉什么
不能只取 el.offsetHeight，它只返回元素自身尺寸，完全忽略 top、bottom 偏移带来的实际占位。
正确做法是遍历所有 absolute 子元素，对每个调用 el.getBoundingClientRect()，然后算出真实底部位置：Math.max(0, rect.bottom - rect.top + rect.top) 等价于 rect.bottom（相对于视口），再减去父容器 getBoundingClientRect().top 得到相对父容器的底部偏移。
还要注意：
- 必须等渲染完成再读，用
requestAnimationFrame或ResizeObserver，别在 DOM 插入后立刻取值 - 多个子元素共存时，要取所有
rect.bottom的最大值，不是第一个 - 别忘了父容器自身的
padding-top和border-top，否则设置height会多出一截
伪元素占位和 padding 占位的区别在哪
两者都是“骗”父容器有内容，但适用条件不同。
padding-bottom 适合子元素尺寸固定、位置可控的场景，比如图标+文字组合中文字用 position: absolute 居底，文字高度恒为 24px，就直接写 padding-bottom: 24px。它简单、无 JS、兼容性好（IE8+），但无法响应字号缩放或文字换行。
伪元素（如 ::after { content: ""; display: block; height: 0; margin-top: 200px; }）更灵活，可配合 JS 注入动态值，且不影响语义和可访问性。但它必须是 display: block 或 inline-block，不能也设 position: absolute，否则照样被忽略。
真正难的不是选哪种技术，而是想清楚：这个父容器的高度，到底该由谁定义？是内容、设计稿、JS 计算，还是干脆就不该由它定义。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
