HTML 高度塌陷问题：原因、解决方法及最佳实践

HTML 中的高度塌陷是指当一个元素包含了另一个元素时，它的高度会塌陷为 0，因为它的高度是由它的内容决定的，而不是由包含的元素决定的。这通常发生在父元素没有设置固定高度或没有设置浮动时。

解决方法：

1. 设置父元素的高度为固定值或使用 min-height 属性。

2. 给父元素设置浮动属性。

3. 给父元素添加 overflow:hidden 属性。

4. 使用 CSS 的伪元素 :before 或 :after 来清除浮动，例如：

.clearfix:before,
.clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
}

这将在父元素的前面和后面添加一个空元素，从而清除浮动。

5. 使用 Flexbox 布局，这种布局可以自动解决高度塌陷的问题。

6. 使用 CSS Grid 布局，同样可以解决高度塌陷的问题。