流式布局和溢出

为元素指定固定高度和宽度，然后向该框添加大量内容，就可以创建一个基本的溢出示例。

内容进入该框。当它填满该框时，它会以可见的方式继续溢出，在框外显示内容，可能显示在后续内容下方。控制溢出行为的属性是 overflow 属性，它具有初始值 visible。这就是为什么我们可以看到溢出内容的原因。

还有其他值可以控制溢出内容的行为。要隐藏溢出内容，请使用 hidden 值。这可能会导致部分内容不可见。

使用 scroll 值将内容包含在它的框中并添加滚动条以使其可查看。即使内容适合该框，也会添加滚动条。

使用 auto 值将在内容适合该框的情况下显示内容，没有滚动条。如果它不适合，则会添加滚动条。将下一个示例与 overflow: scroll 的示例进行比较，您应该会看到 overflow scroll 在只需要垂直滚动时，具有水平和垂直滚动条。下面的 auto 示例仅在我们需要滚动的地方添加滚动条。

正如我们已经学到的，使用除 visible 默认值以外的任何值，都会创建一个新的块级格式化上下文。

注意：在 溢出级别 3 工作草案 中，有一个附加值 overflow: clip。它将像 overflow: hidden 一样工作，但它不允许进行编程滚动，该框将变得不可滚动。此外，它不会创建块级格式化上下文。

overflow 属性实际上是 overflow-x 和 overflow-y 属性的简写形式。如果您只为 overflow 指定一个值，则该值将用于两个轴。但是，您可以指定两个值，在这种情况下，第一个值用于 overflow-x 以及水平方向，第二个值用于 overflow-y 以及垂直方向。在下面的示例中，我只指定了 overflow-y: scroll，因此我们不会得到不需要的水平滚动条。

在 写作模式和流布局 指南中，我们查看了 block-size 和 inline-size 的更新属性，这些属性在处理不同的写作模式时比将我们的布局绑定到屏幕的物理尺寸更有意义。Level 3 Overflow 模块还包括用于 overflow 的流相对属性 - overflow-block 和 overflow-inline。这些对应于 overflow-x 和 overflow-y，但映射取决于文档的写作模式。

这些属性目前在浏览器中还没有实现，所以您现在需要使用物理属性并根据您的写作模式进行调整。

在 Level 3 Overflow 规范中，我们有一些属性可以帮助改善内容在溢出情况下的外观。

The text-overflow 属性处理文本在内联方向上的溢出。它采用两个值之一 clip，在这种情况下，当内容溢出时内容会被剪切，这是初始值，因此是默认行为。我们还有 ellipsis，它会渲染一个省略号，该省略号可能会被使用中的语言或写作模式的更好的字符替换。

还提议了一个 block-overflow 属性，虽然在撰写本文时该名称仍在讨论中。此提议将允许在文本在块维度上溢出时添加省略号。

这在您有一系列文章的情况下很有用，例如，您将列表显示在固定高度的框中，这些框只占用有限数量的文本。对于读者来说，可能不明显的是，在单击框或标题时，还有更多内容可以点击。省略号清楚地表明还有更多内容。该规范将允许插入一串内容或一个常规省略号。

无论您是在网络上的连续媒体中还是在分页媒体格式（如打印或 EPUB）中，了解内容如何溢出对于处理任何布局方法都很有用。通过了解 overflow 在正常流中的工作方式，您应该更容易理解 overflow 内容在网格和 flexbox 等布局方法中的含义。