父级高度塌陷源于absolute元素脱离文档流，解决关键是让父级感知子元素或主动撑高；常用方法是设position: relative提供定位上下文，但需配合内容、padding、min-height等确保高度来源。
父级高度塌陷，不是因为用了 absolute，而是因为 absolute 元素脱离了普通文档流，不再参与父容器的高度计算。解决的关键，是让父级“感知”到子元素的存在，或主动撑开高度。
给父级加 position: relative
这是最常用也最有效的做法。它本身不改变布局，但为子元素的 absolute 定位提供了参考边界（即定位上下文），同时不会导致父级塌陷——因为 relative 仍保留在文档流中，父级高度由其他正常流内元素决定。
注意：如果父级内部除了 absolute 子元素外没有其他内容，仅加 relative 并不能自动撑高父级。此时需配合其他方式补足高度。
确保父级有可计算的高度来源
如果父级除了 absolute 子元素外为空，那它天然就是 0 高。这时要让它“有高度”，得靠以下任一方式：
立即学习“前端免费学习笔记（深入）”；
- 添加非定位的块级内容（如文字、padding、border、min-height）
- 用伪元素模拟占位：
::before { content: ""; display: block; height: 200px; } - 给父级设置明确的
height或min-height
慎用 overflow: hidden 强制触发 BFC
虽然给父级加 overflow: hidden 有时能“意外”撑高，但这只是因为触发了 BFC，且可能截断溢出的 absolute 元素（比如下拉菜单、气泡框）。不推荐作为主要方案，尤其当子元素需要部分溢出显示时。
替代思路：不用 absolute，改用其它布局方式
如果只是为了右对齐、居中等常见需求，优先考虑更现代、更稳健的方式：
- 用
flex+justify-content/margin: auto - 用
grid定义区域和位置 - 用
text-align: right或float（仅限简单场景）
这些方式不脱离文档流，父级高度自然包含子元素。
基本上就这些。核心记住：relative 是定位上下文的基石，但不是万能“增高剂”；真正撑高父级的，永远是文档流内的尺寸或显式声明。
