本文共 634 字，大约阅读时间需要 2 分钟。

盒子坍塌（高度坍塌）的理解及解决方案

一、盒子坍塌（高度坍塌）的定义

盒子坍塌（Height Collapsing）是指在标准流布模型中，父盒子无法继承子盒的高度。通常情况下，父盒的高度会被子盒撑起，高度与子盒的高度一致。但当子盒设置为浮动（Float）后，子盒将完全脱离文档流。此时，父盒的高度将无法被撑起，导致高度塌陷。

二、典型场景分析

当子盒设置为浮动时，子盒将脱离文档流，父盒的高度将无法继承子盒的高度，导致父盒的高度塌陷。这种情况常见于使用浮动布局的网页设计中，尤其是在复杂的布局结构中。

三、常见问题及解决方案

（1）推荐解决方案

在父盒下方添加一个伪类::after，并将其设置为display: block，从而恢复父盒的高度。这种方法无需引入额外的HTML元素，纯粹通过CSS实现，简洁且高效。

/* 示例CSS代码 */
.clearfix::after {
    content: "";
    display: block;
    clear: both;
}

（2）常规流盒子解决方案

在浮动流盒子下方添加一个常规流盒子（通过clear: both属性），从而恢复父盒的高度。这种方法可行，但需要引入额外的HTML元素，相比推荐方案稍显复杂。

四、总结

盒子坍塌是CSS布局中常见问题之一，主要由浮动属性引起。通过合理使用CSS伪类或添加清除盒，可以有效解决这一问题。推荐使用纯CSS方法，既简洁又高效，避免引入无意义的HTML元素。