父元素高度塌陷是必然结果，因为绝对定位元素脱离文档流，不参与父容器高度计算；仅当其他流内子元素存在时，父元素才依据它们计算高度。
父元素无法包裹绝对定位子元素，不是因为“包不住”，而是因为 position: absolute 的元素根本不在文档流里——它不参与父元素高度计算，父元素自然对其“视而不见”。手动设固定高度或用 JS 计算，只是绕开问题的补丁，不是修复布局逻辑。
为什么父容器高度塌陷是必然结果
当子元素设置 position: absolute，浏览器在布局阶段会直接跳过它对父容器尺寸的影响。无论子元素多高、内容多长，父容器的 height 都只基于其他**仍在文档流中的子元素**（比如文本、div、img 未加 position 时）来计算。
- 常见现象：父
div看起来“没高度”，背景色/边框只显示几像素高，子元素悬在下方“飘着” - 检查 computed styles 会发现父元素
height是auto，但实际值为0或极小值 -
overflow: hidden在这种父容器上加了也无效——它裁的不是子元素，而是本就不存在的“溢出区域”
手动设置父元素高度的适用场景与风险
仅在子元素尺寸完全静态、且整个页面无响应式需求时可临时使用。一旦宽度变化、字体缩放、或子内容增减，就会立刻错位或溢出。
- 不要写
height: 250px这类硬编码值，除非你确认这个数字永远不变 - 若必须固定高度，优先用
min-height替代height，保留向上伸展余地 - 搭配
overflow: auto可防止内容被裁，但滚动条位置不可控，体验割裂
JS 动态计算高度的实操要点
本质是用脚本读取绝对定位子元素的 offsetHeight，再赋给父元素。但它不是“自动响应”，必须明确触发时机。
- 监听子元素尺寸变化需用
ResizeObserver，而非只靠window.onload—— 否则图片加载、字体渲染、动态插入内容都会漏掉 - 若子元素含
transform或scale，offsetHeight返回的是原始尺寸，不是视觉尺寸，需额外换算 - 避免在循环中反复读写
style.height，应先计算所有子项最大高度，再一次性设置 - 示例关键逻辑：
const parent = document.querySelector('.viewBlocks');<br>const box = parent.querySelector('.box');<br>const ro = new ResizeObserver(() => {<br> parent.style.height = box.offsetHeight + 'px';<br>});<br>ro.observe(box);
真正该优先考虑的替代方案
用 position: absolute 却又要求父容器包裹它，本身就违背了该属性的设计意图。更合理的方式是让子元素“回到流中”：
- 把图片/卡片改用
background-image+padding-top维持宽高比，父容器自然撑开 - 用
display: flex或display: grid布局，子元素默认参与尺寸计算，再用align-self/justify-self控制位置 - 若必须保留绝对定位（如弹层、tooltip），就不要指望父容器包裹它——让它脱离父级，挂到
body下，由 JS 控制定位坐标
最常被忽略的一点：position: relative 加在父容器上，只解决“定位参考系”问题，不解决“高度塌陷”问题。它让子元素能相对父级定位，但依然不会让父级感知其存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
