确保你的列不会水平塌陷

您可能熟悉元素垂直塌陷的情况。如果一个元素只包含其他浮动元素，则父元素将塌陷为零高度。我们通常使用 清除修复 来解决这个问题。但如果一个元素不包含任何内容，它也会水平塌陷，这对于布局来说非常尴尬。

以下是一些用于三列布局的 HTML 示例。

<div class="grid grid-bad">
  <div class="col col-1-3"></div>
  <div class="col col-1-3"></div>
  <div class="col col-1-3">
    I'm the last column.
  </div>
</div>

浮动仍然可能是目前处理列的最实用方法。我们可能使用 一个非常简单的网格系统，如下所示

.col {
  float: left;
}
.col-1-3 {
  width: 33.33%
}

如果您和我一样，您可能有一个像这样的心理模型

但您可能会感到惊讶。因为前两列是空的，没有任何其他东西来给它们提供任何高度，所以它们会水平塌陷。最后一列，因为它确实包含一些内容，将尊重它的宽度，但会出现在左侧，因为前面的两列已经塌陷了。

何时会发生这种情况

我最近在一个使用 Ajax 加载列内容的情况下遇到了这个问题。该列原本不包含任何内容，所以直到 Ajax 调用成功并将内容添加进来之前，它一直水平塌陷。当内容进来时，它将所有后面的列都向右移动。很尴尬。

查看 CodePen 上 Chris Coyier 创建的 gBCfl 演示 (@chriscoyier) CodePen

你可能永远不会遇到这种情况。也许你的列总是包含某种内容。那没什么大不了的。但是，如果你正在制作一个网格框架，即使是为你自己，你可能也应该考虑这种情况。

如何修复它

这些列需要某种东西来赋予它们至少 1 像素的高度。有了它，它们就不会水平塌陷。有时列有填充，这就可以了。如果一个列有顶部或底部填充，或者顶部或底部边框，你就没问题了。如果没有，你可以设置一个最小高度。

/* Any of these with positive lengths will work */

.col {
  border-top: 1px solid white;
  border-bottom: 1px solid white;
  padding-top: 1rem;
  padding-bottom: 1rem;
  min-height: 1px;
}

所以是的，这种情况并不常见，但是如果你正在制作一个网格系统，你最好还是在里面添加一些东西来防止塌陷。