高度塌陷（Height Collapse）是 CSS 布局里常见的问题，通常在父元素包含浮动子元素时出现。下面详细解释该问题的成因、表现及解决办法。

问题成因

在正常的文档流中，父元素的高度默认会根据其包含的子元素内容自动调整，以包裹住所有子元素。不过，当子元素设置了 float 属性（如 float: left 或 float: right）后，这些子元素会脱离正常的文档流，不再占据原有的空间。此时，父元素在计算自身高度时，会忽略这些浮动的子元素，进而导致父元素高度变为 0 或者只包含非浮动子元素的高度，这就是高度塌陷问题。

表现示例