CSS中的高度崩塌是指在一些特定情況下，元素的高度會被自動壓縮到零，這可能會導致頁面顯示問題。以下是導致CSS高度崩塌的情況:

/* 第一種情況:浮動元素 */
.float-left {
float: left;
}
.float-right {
float: right;
}

當一個元素設置了浮動屬性時，它的高度將不再被父元素計算，因此父元素的高度可能會崩塌。

/* 第二種情況:內聯元素 */
.inline-element {
display: inline;
}

當一個元素被設置為內聯元素時，它的高度也將不再被父元素計算，因此父元素的高度可能會崩塌。

/* 第三種情況:絕對定位元素 */
.absolute-element {
position: absolute;
}

當一個元素被設置為絕對定位時，它的高度也將不再被父元素計算，因此父元素的高度可能會崩塌。

為了避免這些問題，我們可以使用以下技巧:

/* 清除浮動，避免高度崩塌 */
.clearfix::after{
content: "";
display: block;
clear:both;
}

使用clearfix類清除浮動，只需在包含浮動元素的父元素上添加clearfix類即可。

/* 使用display: block，避免內聯元素高度崩塌 */
.block-element {
display: block;
}

使用display:block屬性，可以將內聯元素轉換為塊級元素，從而保持其高度。

/* 相對定位，避免絕對定位崩塌 */
.relative-element {
position: relative;
}

使用相對定位，可以保持絕對定位元素的高度，從而避免高度崩塌。