CSS 高度塌陷解决方案：5种常用方法

在 CSS 中，高度塌陷通常指的是父元素的高度被子元素撑开，但因为子元素使用了浮动或绝对定位等属性，导致父元素高度无法被正确计算。以下是几种解决方案：

清除浮动。在父元素的 CSS 样式中添加'clear:both'或'overflow:hidden'属性来清除子元素浮动带来的影响。
使用伪元素。在父元素的 CSS 样式中添加'::after'伪元素，并给其添加'content:''', 'display:block', 'clear:both'属性来清除浮动。
使用 Flexbox 布局。将父元素的 display 属性设置为'flex'或'inline-flex'，并设置相关属性来控制子元素的布局，这样就可以避免高度塌陷问题。
使用 Grid 布局。将父元素的 display 属性设置为'grid'或'inline-grid'，并设置相关属性来控制子元素的布局，同样可以避免高度塌陷问题。
使用 position 属性。如果子元素使用了绝对定位属性，可以在父元素中添加'position:relative'属性，这样父元素的高度就可以被正确计算。