CSS中的高度塌陷（也稱為塌陷問題）是一種常見的布局問題。它指的是某些元素的高度不能自適應其內容的高度，而是塌縮成更小的高度。

這種現象通常會出現在父元素的高度被設置為固定值或百分比，并且內部的子元素都采用了浮動或絕對定位的布局方案時。

.parent {
height: 300px;
}
.child {
float: left;
}

在上述代碼中，父元素的高度被設置為300像素，而子元素采用了浮動布局。如果子元素的高度大于父元素的高度，則會出現高度塌陷的問題。

為了解決這個問題，我們可以使用如下兩種方法：

一、清除浮動：

.parent {
height: 300px;
overflow: hidden;
}
.child {
float: left;
}

在上述代碼中，我們在父元素中添加了overflow: hidden屬性，這個屬性可以清除子元素的浮動影響，從而避免高度塌陷的問題。

二、使用flexbox布局：

.parent {
height: 300px;
display: flex;
flex-wrap: wrap;
}
.child {
flex-grow: 1;
flex-basis: 0;
}

在上述代碼中，我們將父元素的display屬性設置為flex，開啟了flexbox布局。我們還為子元素設置了flex-grow: 1和flex-basis: 0屬性，這樣子元素就能夠自動擴展其高度，以適應父元素的高度。

總之，高度塌陷是CSS布局中常見的問題，但是我們可以通過清除浮動或使用flexbox布局來避免這個問題，從而實現更加穩定的布局。