多列布局中的溢出处理

当项目的尺寸大于列框时，就会发生溢出情况。例如，当列中的图像宽度超过column-width值或根据column-count声明的列数计算出的列宽时，就会发生这种情况。

在这种情况下，内容应该可见地溢出到下一列，而不是被列框裁剪。

有两列文本。在左侧列中，有一张照片比列宽。图像扩展到第二列，显示在右侧列的文本后面。右侧列的文本流不受突出照片的影响，但外观会受到影响。

如果希望图像适合列框，设置max-width: 100%将阻止图像超出其容器（在本例中为列框）的大小。

溢出列的处理方式取决于媒体上下文是分段的（例如打印）还是连续的（例如网页）。

在分段媒体中，在用列填充片段（例如页面）后，列将移动到新页面并用列填充该页面。在连续媒体中，列将在内联方向溢出。在 Web 上，这意味着您将获得一个水平滚动条。

下面的示例显示了这种溢出行为。多列容器具有设置的height，并且文本空间不足以创建列；因此，我们在容器外部创建了列。

Web 上多列的一个问题是，如果列的高度超过视口高度，读者需要上下滚动页面才能阅读，这并非良好的用户体验。避免这种情况的一种方法是，只有在知道有足够垂直空间时才应用列属性。

在下面的示例中，我们使用了 min-height @media 查询 来确保在应用列属性之前有足够的垂直空间。

在本系列的最终指南中，我们将了解 多列布局中的内容断裂是如何工作的，以便我们能够控制内容在各列之间的断裂方式。