因为绝对定位（absolute）会脱离标准文档流，导致父容器在计算高度时完全忽略该子元素。要解决这个问题，需要改用相对定位（relative）、浮动（float），或者使用 flexbox 和 grid 布局来让子元素参与父容器的空间分配。
为什么 absolute 子元素不撑开父容器？
当子元素设置为 position: absolute 时，它不再占据文档流中的任何空间。父容器在计算自身高度时，只考虑处于标准流中的子元素，因此绝对定位的子元素被视为“悬浮”在上方，对父容器的高度贡献为零。
<div class="parent">
<div class="child-absolute">我是绝对定位</div>
</div>
<style>
.parent {
border: 2px solid blue;
/* height: auto; */
}
.child-absolute {
position: absolute;
top: 0;
left: 0;
width: 100px;
height: 100px;
background: red;
}
</style>运行上述代码，你会发现蓝色边框的父容器高度为 0，红色方块虽然可见，但没有撑开父容器。
立即学习“前端免费学习笔记（深入）”；
如何正确撑开父容器？
可以使用 position: relative 或 display: flex 来替代绝对定位。相对定位的元素仍然占据文档流空间，因此能正常撑开父容器；Flexbox 则通过主轴方向自动扩展父容器高度以容纳子元素。
<div class="parent-flex">
<div class="child-relative">我是相对定位</div>
</div>
<style>
.parent-flex {
display: flex;
flex-direction: column;
border: 2px solid green;
}
.child-relative {
position: relative;
width: 100px;
height: 100px;
background: orange;
}
</style>运行上述代码，绿色边框的父容器高度将变为 100px，橙色方块正常撑开父容器。
如果必须使用 absolute 且需撑开父容器怎么办？
如果业务逻辑强制要求子元素使用 position: absolute，可以通过给父容器设置固定高度、使用伪元素占位，或借助 JavaScript 动态计算并设置父容器高度来实现撑开效果。
