position: absolute 子元素脱离文档流，父容器 height: auto 会忽略它；offsetheight 和 getboundingclientrect().height 不含偏移量，无法撑高父容器；应按语义判断是否需撑高，优先用 flex/grid 或 relative+transform，必要时用 resizeobserver 动态计算 min-height。
因为 position: absolute 的子元素彻底脱离文档流，父元素在计算 height: auto 时直接忽略它——这不是 bug，是 CSS 规范的明确行为。
为什么 offsetHeight 和 getBoundingClientRect().height 都不能直接用来撑高父容器
这两个值只返回元素自身的盒尺寸，不包含 top、bottom 偏移带来的实际视觉占位。比如一个 div 设置了 position: absolute; top: 40px; height: 100px，它的 offsetHeight 是 100，但实际底边落在父容器坐标系的 y = 140px 处。你真正需要的是所有 absolute 子元素中最大的 rect.bottom，再减去父容器自身的 rect.top。
- 只读
el.offsetHeight→ 忽略了偏移，高度算小了 - 没减父容器的
padding-top和border-top→ 高度算多了 - 在
DOMContentLoaded阶段取值 → 字体、图片、异步内容还没渲染，尺寸不准
为什么 overflow: hidden、display: flow-root、clearfix 全都无效
这些方案全是为解决 float 塌陷设计的，和 position: absolute 完全无关。它们要么靠伪元素清除浮动，要么靠创建 BFC 包裹浮动内容，但 absolute 元素既不浮动，也不参与任何 BFC 的高度计算。加了 overflow: hidden，父容器还是看不见子元素；反而可能意外裁剪掉弹层阴影或下拉菜单。
-
clearfix的::after只清浮动，对 absolute 无感知 -
display: flow-root创建新 BFC，但依然无法“看见”absolute子项 -
clear: both写在父元素上 → 父元素自己没浮动，该声明完全没作用
什么时候真该让父容器撑高？先看语义，不是看视觉
别急着“修复”，先问：这个 absolute 元素是不是父容器的内容逻辑一部分？
- 装饰性用途（右上角徽章、加载动画、背景浮层）→ 不该撑高，保持塌陷就是正确行为
- 功能性内容（翻转卡片背面、下拉菜单主体、模态框内容区）→ 必须参与高度计算，此时应放弃
position: absolute - 强行用 JS 或 CSS “撑高”一个本不该撑高的容器，会让后续加动画、做响应式、改布局越来越难维护
真正能落地的三种做法（按推荐顺序）
选哪条取决于语义责任和控制粒度：
- 改用
display: flex或display: grid+align-self/justify-self：多数所谓“必须绝对定位”的场景，其实只是想对齐，完全可替代，且子元素天然参与高度计算 - 改用
position: relative+transform: translate()：保留视觉偏移意图，元素仍在文档流中，父容器自动感知高度 - JS 动态计算：仅当非用
position: absolute不可（如复杂动画层叠、第三方库限制），必须监听ResizeObserver，遍历每个 absolute 子元素，取Math.max(...map(r => r.bottom)) - parentRect.top，写入父容器的style.minHeight（比height更安全）
最容易被忽略的是：很多人一上来就写 parent.style.height = child.offsetHeight + 'px'，结果在横竖屏切换、字体缩放、动态插入内容时频繁错位。真正难的不是代码怎么写，而是判断——这个元素，在 DOM 结构和交互职责上，是不是真属于这个父容器的内容流。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
