CSS高度塌陷问题的解决方案

CSS高度塌陷（又称为Margin Collapse）是指在垂直方向上相邻的两个块级元素的外边距（margin）会发生重叠，导致两个元素的总外边距高度比单个元素的外边距高度要小。

出现高度塌陷问题的常见场景包括：

• 父元素包含多个子元素，其中至少一个子元素存在margin-top和父元素的边界重叠；
• 相邻的兄弟元素中，上一个元素的margin-bottom和下一个元素的margin-top重叠。

出现高度塌陷问题后，可能导致页面布局和样式出现异常，进而影响用户体验。下面介绍几种解决高度塌陷问题的方式。

1. 父元素添加border、padding或inline-block

解决高度塌陷问题最常见的方式就是给父元素添加一个边框（border）、内边距（padding）或将其转化为内联块（inline-block）元素。这样做可以避免父元素的边界和子元素的外边距产生重叠，从而避免高度塌陷问题的出现。

.parent {
  border: 1px solid #000;
  overflow: auto; /* 避免内部的浮动元素破坏父元素布局 */
  /* 或者 */
  padding: 1px;
  overflow: hidden;
  /* 或者 */
  display: inline-block;
}

2. 子元素添加overflow：hidden

另一种简单的方式是在造成高度塌陷的子元素上添加一个overflow:hidden样式，这样就能防止子元素的margin-top和父元素的边界重合，从而避免高度塌陷。

.parent {
  /* 仍然需要避免内部的浮动元素破坏父元素布局 */
  overflow: auto;
}

.child {
  margin-top: 20px;
  overflow: hidden; /* 添加overflow:hidden */
}

示例1

<div class="parent">
  <div class="child">Content1</div>
  <div class="child">Content2</div>
</div>

.parent {
  border: 1px solid #000;
  overflow: auto;
}

.child {
  margin-top: 20px;
}

在这个示例中，父元素和子元素都有20px的外边距，但因为它们之间的重叠导致外边距只有20px生效，从而使得整个元素的总高度比预期要小。解决的方式是给父元素添加边框或内边距，或将父元素转化为内联块元素。

示例2

<div class="parent">
  <div class="child1">Content1</div>
  <div class="child2">Content2</div>
</div>

.parent {
  overflow: auto;
}

.child1 {
  margin-bottom: 20px;
}

.child2 {
  margin-top: 20px;
}

在这个示例中，子元素1和子元素2之间的外边距重叠导致了高度塌陷问题。解决的方式是给父元素添加overflow:hidden属性，从而在子元素2的外边距超出父元素边界时，将其裁剪至父元素内部进行展示。