position:absolute;高度塌陷

### 解决方案

#### 方法一：使用伪元素清除浮动
通过向父级容器添加 `::after` 伪元素并应用清除浮动的效果，可以有效防止高度塌陷。

.parent {
    position: relative;
}

.parent::after {
    content: "";
    display: block;
    clear: both;
}

这种方法适用于绝对定位的子元素场景[^1]。

#### 方法二：显式指定父元素的高度
虽然直接设定固定高度不是最佳实践，但在某些特定情况下可能是必要的。更灵活的做法是利用自动计算属性来动态调整父元素高度：

.parent {
    height: fit-content; /* 或者 min-height */
}

这种方式允许浏览器根据内容自适应调整父元素尺寸[^4]。

#### 方法三：引入额外包裹层
创建一个新的 div 来容纳所有的常规流内子项，并保持原有结构不变。新加入的 wrapper 将承担原本由父元素负责的空间布局职责。

<div class="parent">
    <div class="wrapper"> <!-- 新增 -->
        <div class="child"></div>
    </div>
</div>

.wrapper {
    overflow: hidden; /* 触发BFC*/
}
.child {
    position: absolute;
}

此策略能够有效地阻止内部绝对定位元素影响外部容器大小[^3]。

#### 方法四：采用 Flexbox 布局模型
转换为弹性盒子模式可以让父节点自动扩展以包容其所有后代组件，而无需担心它们的具体位置特性。

.parent {
    display: flex;
    flex-direction: column;
}
.child {
    position: absolute;
}

需要注意的是，在这种配置下可能还需要进一步微调具体样式以满足设计需求[^2]。