浅谈CSS 高度塌陷问题

CSS 高度塌陷问题

在 CSS 布局中，高度塌陷（或称为“塌陷”）是一个经常遇到的问题。通常情况下，你会遇到高度塌陷问题是因为父元素的高度无法被自动计算，从而导致其中的子元素出现在预期之外的位置。本文将详细介绍什么是高度塌陷，及其如何出现和如何解决。

什么是高度塌陷？

高度塌陷指的是父元素因为包含的子元素过于膨胀导致其高度无法被自动计算。这样一来，父元素的高度就会变成0，父元素中的所有子元素就会跑到容器的顶部或底部，这就是典型的高度塌陷问题。

高度塌陷的出现原因

高度塌陷问题通常发生在以下情况：

• 子元素浮动，且父元素只包含浮动元素
• 父元素使用了绝对位置
• 父元素使用了漂浮位置

如何解决高度塌陷？

解决高度塌陷问题的方法有很多，下面是常见的一些方法：

1. 清除浮动

这是最常见的解决高度塌陷问题的方法之一。如下所示，为了清除浮动，我们可以在父元素中加入一个空元素，利用 CSS 的 clear 属性来清除浮动产生的影响。

<div class="parent">
  <div class="child left">左侧内容</div>
  <div class="child right">右侧内容</div>
  <div class="clear"></div>
</div>

.parent {
  border: 1px solid #ddd;
  overflow: hidden;
}

.child {
  float: left;
  width: 50%;
  height: 100px;
  background-color: #f5f5f5;
}

.clear {
  clear: both;
}

1. 使用 BFC

BFC（块级格式化上下文）可以避免浮动元素或绝对定位元素对其外部容器产生的影响，并解决高度塌陷问题。我们只需要把父元素设置为 BFC 即可：

<div class="parent">
  <div class="child left">左侧内容</div>
  <div class="child right">右侧内容</div>
</div>

.parent {
  border: 1px solid #ddd;
  overflow: hidden;
}

.child {
  float: left;
  width: 50%;
  height: 100px;
  background-color: #f5f5f5;
}

.parent {
  display: flow-root;  /* 或者 display: flex; */
}

1. 使用 flex 布局

CSS3 新增的 flex 布局可以很方便地解决高度塌陷问题。只需要把父元素设置为 display: flex; 就可以了。

<div class="parent">
  <div class="child left">左侧内容</div>
  <div class="child right">右侧内容</div>
</div>

.parent {
  border: 1px solid #ddd;
  display: flex;
}

.child {
  flex-basis: 50%;
  height: 100px;
  background-color: #f5f5f5;
}

结论

高度塌陷是 CSS 布局中常见的问题，我们需要了解其原因及解决方法。常用的解决方法包括清除浮动、使用 BFC 和使用 flex 布局。根据具体情况，选择不同的解决方法即可轻松解决高度塌陷问题。

示例1：使用清除浮动解决高度塌陷问题的示例代码

示例2：使用 BFC 解决高度塌陷问题的示例代码