高度塌陷（也称为块级格式化上下文塌陷）是指在 CSS 布局中，由于浮动元素或绝对定位元素导致的元素高度计算问题。具体来说，当一个元素包含浮动元素，且没有显式设置高度或使用 clearfix 技巧来清除浮动时，父元素的高度可能会塌陷，导致父元素的高度变为零，无法正确包含子元素。

高度塌陷可能会导致页面布局问题，特别是在以下情况下：

浮动元素导致的高度塌陷： 当父元素包含浮动元素，而没有清除浮动，父元素的高度可能会塌陷。

绝对定位元素导致的高度塌陷： 当父元素包含绝对定位的子元素，而没有适当设置父元素的高度，也可能导致高度塌陷。

要解决高度塌陷问题，可以采取以下方法：

使用 clearfix 技巧： 最常见的解决方法是在父元素中应用 clearfix 技巧。这可以通过在父元素上应用一个额外的 CSS 类或伪元素来实现。clearfix 技巧会清除浮动，以确保父元素正确包含浮动元素。

<div class="parent clearfix">
  <div class="float-left">浮动元素</div>
  <div class="float-left">浮动元素</div>
</div>

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

使用 Flexbox 布局或 Grid 布局： 如果可能的话，使用现代的布局方式，如 Flexbox 或 Grid 布局，这些布局方式不容易导致高度塌陷。

显式设置父元素的高度： 如果你知道父元素的高度应该是多少，可以显式设置它的高度，以确保它不会塌陷。这种方法在一些情况下是有效的，但不适用于所有场景，因为它限制了布局的灵活性。