父容器高度塌陷是因absolute元素脱离文档流，不参与高度计算；修复需按语义判断：非内容流元素（如徽章）不应撑高，属内容流者应改用flex/grid或resizeobserver动态设minheight。
父边框塌陷不是边框本身出问题，是父容器 height 计算为 0 导致边框“没地方画”——因为 position: absolute 元素被布局引擎彻底忽略，父容器压根不把它当自己人。
为什么父容器 height 变成 0
浏览器在 layout 阶段只遍历文档流内元素计算高度。position: absolute 元素跳过这一步，既不贡献高度，也不触发父容器的最小高度约束。哪怕它视觉上盖在父容器里、getBoundingClientRect() 能取到坐标、点击事件也正常响应，父容器的 offsetHeight 和 DevTools 显示的 height: 0px 都是真实结果。
-
overflow: hidden、display: flow-root、::after { clear: both }全无效——它们只管浮动（float）或 BFC 包裹，和absolute不是一个系统 - 父容器加了
position: relative也不行：这只是创建了定位上下文，不是“拉回文档流”的开关 - 即使子元素有
width/height、border、padding，只要position是absolute，就铁定不参与父容器高度计算
哪些 CSS 属性会让父容器“看起来有高度”但实际没用
有些写法会让背景或边框意外显示出来，容易误判为“修好了”，其实只是视觉巧合，且伴随副作用：
-
overflow: hidden：强制创建 BFC，让父容器自身盒模型被渲染（比如边框能画出来），但offsetHeight还是 0，下方兄弟元素仍会上移，且所有超出范围的absolute内容会被真裁剪 -
padding或border：比如padding-bottom: 20px确实能让背景展开，但这和子元素无关，只是父容器自己占了空间；若子元素高度动态变化，这里就完全失配 -
min-height硬写死值：适用于图标+单行文字等高度恒定场景，但一旦子元素因字体缩放、响应式断点或 JS 修改top/bottom而位移，就会留白或溢出
怎么判断该不该修复塌陷
关键不在技术能不能撑高，而在语义上这个 absolute 元素是否属于父容器的内容流：
- 右上角徽章、全屏遮罩层、Canvas 上的控制按钮 → 不该撑高。强行干预只会让布局逻辑混乱，后续加动画或换主题时更难维护
- 翻转卡片的背面、轮播图滑块、弹出菜单主体 → 必须撑高。这时应优先放弃
absolute，改用display: flex或display: grid+place-items，天然保留在流中且自动参与高度计算 - 非用
absolute不可（如第三方库限制、复杂层叠动画）→ 用ResizeObserver监听每个absolute子元素的getBoundingClientRect()，取最大bottom减去父容器top，写入父容器的style.minHeight（不是height）
JS 动态计算时最容易漏掉的三件事
就算决定用 JS，直接 el.offsetHeight + el.offsetTop 是错的：
- 没考虑
top/bottom偏移带来的真实底部位置——要算rect.bottom - parentRect.top，不是el.offsetTop + el.offsetHeight - 没减去父容器自身的
padding-top和border-top，导致最终高度多出一截 - 在
DOMContentLoaded就执行，此时图片、字体、异步内容未加载完成，尺寸不准；必须用ResizeObserver或至少等requestAnimationFrame两次以上
真正难的从来不是代码怎么写，而是每次加 position: absolute 前，先问一句：它真的属于这个父容器的“内容责任范围”吗？如果不是，换容器、提级定位、或者用 relative + transform，比硬撑高度干净得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
