css中页面高度塌陷的问题是我们经常会碰到的。所谓的页面高度塌陷，指的是父级元素内部的子元素，在使用浮动或绝对定位等属性后，容器元素的高度不能正常被撑开，而导致父容器高度变为0的问题。

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

为了解决页面高度塌陷的问题，我们可以使用overflow:hidden、clear:both或者在父级元素上给定一个明确的高度值来解决。

其中使用overflow:hidden或者在父级元素上给定一个明确的高度值虽然可以解决高度塌陷的问题，但是会剪裁掉子元素超出父容器的部分。如果我们不想让子元素的内容被剪裁，我们可以使用clear:both来清除浮动。

除此之外，我们还可以使用伪元素::after来实现清除浮动。具体实现方法为在父级元素上添加clearfix类，并在样式表中定义如下样式：

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

在使用以上方法来解决页面高度塌陷的问题时，我们需要注意不要忘记清除浮动，同时掌握不同的清除浮动方法，以便在实际开发中选用最合适的方法解决问题。