CSS 高度塌陷

1. 引言

在进行网页布局时，我们常常会遇到一些奇怪的现象，比如两个父元素都包含了子元素，但是一个父元素却没有包裹住子元素的高度。这个问题被称为 CSS 高度塌陷（CSS Collapsing Margins），是一个比较容易出现但又不容易察觉的 bug。本文将详细解释什么是 CSS 高度塌陷，为什么会发生，以及如何避免和解决这个问题。

2. 什么是 CSS 高度塌陷

高度塌陷指的是当一个块级元素的上边距（margin-top）和下边距（margin-bottom）都相遇时，两者之间的空隙会塌缩，从而导致父元素的高度也被压缩。这种现象看起来很奇怪，因为我们可能会认为父元素的高度应该是两个子元素高度的和。

3. 为什么会发生 CSS 高度塌陷

高度塌陷的原理是因为 margin 是一种外边距折叠（margin collapsing）的机制。在 CSS 标准中，规定相邻两个块级元素的上下外边距会发生折叠，只显示其中的最大外边距值。

高度塌陷会发生在一些特定的情况下，例如：

3.1 兄弟元素塌陷

当两个相邻的兄弟元素的上下边距都为正数时，它们之间的外边距会折叠。

<style>
    div {
        margin: 20px;
    }
</style>

<div>兄弟元素1</div>
<div>兄弟元素2</div>

上述代码中的两个兄弟元素之间的外边距实际上只有 20px，而不是期望的 40px。

3.2 父子元素塌陷

当一个父元素的上边距和第一个子元素的上边距，或者父元素的下边距和最后一个子元素的下边距都为正数时，父元素与子元素之间的外边距会折叠。

<style>
    div {
        margin: 20px;
    }
</style>

<div>
    <p>父元素</p>
</div>
<p>子元素</p>

上述代码中，父元素与子元素之间的外边距实际上只有 20px，而不是期望的 40px。

4. 如何避免 CSS 高度塌陷

虽然高度塌陷是 CSS 标准中的一个特性，但我们可以通过一些方法来避免它。

4.1 使用 padding 替代 margin

如果我们将元素的外边距改为内边距，就可以避免高度塌陷的发生。这是因为内边距不会发生折叠。

<style>
    div {
        padding: 20px;
    }
</style>

<div>父元素</div>
<p>子元素</p>

4.2 使用块级元素包裹子元素

我们可以使用一个额外的块级元素来包裹子元素，并将此元素的上下内边距设为 1px，来避免高度塌陷。这是因为块级元素之间的外边距不会发生折叠。

<style>
    .wrapper {
        padding: 1px 0;
    }
</style>

<div class="wrapper">
    <p>父元素</p>
</div>
<p>子元素</p>

4.3 使用 clearfix 解决父子元素塌陷

如果在一个父元素和第一个子元素之间或者父元素和最后一个子元素之间存在上下外边距时，我们可以使用 clearfix 来解决高度塌陷的问题。

<style>
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
</style>

<div class="clearfix">
    <p>父元素</p>
</div>
<p>子元素</p>

5. 如何解决 CSS 高度塌陷

如果不想改变布局结构，而仅仅是想解决高度塌陷的问题，我们可以使用一些方法。

5.1 使用 overflow 属性

通过给父元素添加 overflow 属性，会触发 BFC（Block Formatting Context）的创建，从而避免高度塌陷。

<style>
    .parent {
        overflow: auto;
    }
</style>

<div class="parent">
    <p>父元素</p>
</div>
<p>子元素</p>

5.2 使用 display: flow-root

在现代浏览器中，我们可以使用 display: flow-root 属性来创建一个 BFC，从而解决高度塌陷。

<style>
    .parent {
        display: flow-root;
    }
</style>

<div class="parent">
    <p>父元素</p>
</div>
<p>子元素</p>

6. 总结

CSS 高度塌陷是一个常见但又容易忽略的 bug，造成页面布局不符合预期。我们可以通过改变元素的外边距、内边距、使用块级元素包裹子元素、使用 clearfix，或者触发 BFC 的方式来避免和解决高度塌陷的问题。在实际开发中，我们应该注意避免高度塌陷的发生，保证页面的正常布局。