CSS 高度塌陷解决方案：5种常见方法及示例

高度塌陷是指当一个元素的高度被设置为自适应（如height: auto;）时，其父元素的高度无法被撑开，导致父元素高度塌陷。以下是几种常见的解决方案：

使用浮动：将子元素浮动，可以让父元素撑开。但需要注意清除浮动，否则可能会影响其他元素的布局。
使用绝对定位：将子元素绝对定位，可以让父元素撑开。但需要注意设置父元素的position属性为relative或者absolute，否则可能会影响其他元素的布局。
使用Flexbox布局：使用Flexbox布局可以很好地解决高度塌陷的问题，可以通过设置align-items属性为stretch来让子元素的高度自适应父元素的高度。
使用Grid布局：使用Grid布局同样可以解决高度塌陷的问题，可以通过设置grid-template-rows属性为auto来让子元素的高度自适应父元素的高度。
使用伪元素清除浮动：在父元素的CSS样式中使用::after伪元素清除浮动，可以让父元素自适应子元素的高度。例如：

.parent::after {
    content: '';
    display: table;
    clear: both;
}