css中頁(yè)面高度塌陷的問(wèn)題是我們經(jīng)常會(huì)碰到的。所謂的頁(yè)面高度塌陷，指的是父級(jí)元素內(nèi)部的子元素，在使用浮動(dòng)或絕對(duì)定位等屬性后，容器元素的高度不能正常被撐開，而導(dǎo)致父容器高度變?yōu)?的問(wèn)題。

.container {
border: 1px solid #ccc;
overflow: hidden; /* 清除浮動(dòng)的方法一 */
}
.box {
float: left;
width: 200px;
height: 100px;
background-color: #ccc;
}
.clearfix::after { /* 清除浮動(dòng)的方法二 */
content: "";
display: table;
clear: both;
}

為了解決頁(yè)面高度塌陷的問(wèn)題，我們可以使用overflow:hidden、clear:both或者在父級(jí)元素上給定一個(gè)明確的高度值來(lái)解決。

其中使用overflow:hidden或者在父級(jí)元素上給定一個(gè)明確的高度值雖然可以解決高度塌陷的問(wèn)題，但是會(huì)剪裁掉子元素超出父容器的部分。如果我們不想讓子元素的內(nèi)容被剪裁，我們可以使用clear:both來(lái)清除浮動(dòng)。

除此之外，我們還可以使用偽元素::after來(lái)實(shí)現(xiàn)清除浮動(dòng)。具體實(shí)現(xiàn)方法為在父級(jí)元素上添加clearfix類，并在樣式表中定義如下樣式：

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

在使用以上方法來(lái)解決頁(yè)面高度塌陷的問(wèn)題時(shí)，我們需要注意不要忘記清除浮動(dòng)，同時(shí)掌握不同的清除浮動(dòng)方法，以便在實(shí)際開發(fā)中選用最合適的方法解決問(wèn)題。