CSS Overflow 属性

页面上的每个元素都是一个矩形框。这些框的大小、位置和行为都可以通过 CSS 控制。行为指的是当框内和框周围的内容发生变化时，框如何处理。例如，如果您不设置框的高度，则该框的高度将根据需要增长以容纳内容。但是，当您对框设置特定高度或宽度，而内部内容无法容纳时会发生什么？这就是 CSS overflow 属性发挥作用的地方，它允许您指定希望如何处理这种情况。

overflow 属性有四个值：**visible**（默认）、**hidden**、**scroll** 和 **auto**。还有 overflow-y 和 overflow-x 这两个姊妹属性，它们的应用范围较窄。

让我们分别看看它们，然后讨论一些常见用法和特性。

可见 (Visible)

如果您根本没有设置 overflow 属性，则默认为 visible。因此，通常情况下，没有必要显式地将此属性设置为 visible，除非您要覆盖从其他地方设置的值。

这里要记住的重要一点是，即使内容在框外可见，该内容也不会影响页面的布局流。例如

通常，您不应该对包含网页文本的框设置静态高度，因此这种情况不应该出现。

隐藏 (Hidden)

默认 visible 的反面是 **hidden**。这会隐藏超出框的任何内容。

这在处理动态内容以及溢出可能导致严重布局问题的情况下特别有用。但是，请记住，以这种方式隐藏的内容是完全无法访问的（除非查看源代码）。因此，例如，如果用户将其默认字体大小设置为大于您预期的值，您可能会将文本推到框外并将其完全隐藏在其视图之外。

滚动 (Scroll)

将框的 overflow 值设置为 scroll 将隐藏框外部的内容渲染，但会提供滚动条来滚动框内部以查看内容。

需要注意的是，无论如何，您都会获得水平和垂直两个滚动条，即使内容只需要其中一个。

自动 (Auto)

自动溢出 (Auto overflow) 与 scroll 值非常相似，只是它解决了在不需要时出现滚动条的问题。

浮动清除 (Float Clearing)

奇怪的是，设置 overflow 的另一种流行用法是浮动清除。设置 overflow 不会在元素处清除浮动，而是自身清除。这意味着应用了 overflow（**auto** 或 **hidden**）的元素将根据需要扩展以包含内部浮动的子元素（而不是折叠），假设没有声明高度。就像这样

有关此内容以及浮动的更多详细信息，请参阅文章 关于浮动的一切。

跨浏览器问题 (Cross Browser Concerns)

与 CSS 中的大多数内容一样，overflow 也有很多跨浏览器特性。它们如下所示

滚动条在框内还是框外？

Firefox 将它们放在外部，IE 将它们放在内部。我认为只有 IE 实际上正确地做到了这一点（它应该在内部）。

确保考虑这种重大差异。

IE 8 扩展框错误

IE 有很多有趣的新错误，包括一些非常严重的错误，会隐藏整个网页。 更多详细信息请参见此处。

破坏浮动布局 (Breaking floated layouts)

IE 6、7 和 8 都会破坏默认的 overflow visible，并会水平扩展框以适应内容（可能是图像）。这对于基于浮动列构建的布局尤其痛苦，单个扩展列可能会将其他列向下推并导致一些非常严重的布局损坏。

可以使用 CSS 样式化滚动条吗？

IE 曾经允许在旧版本的 IE 中使用此功能，但后来已停止。WebKit/Blink 浏览器允许使用它，这里有一些相关信息。但这并非标准，目前尚不清楚标准机构是否对标准化它感兴趣。如果您绝对需要自定义的跨浏览器滚动条，则需要使用 JavaScript 自定义处理。这里有一个 简单的开始，这里还有一个 StackOverflow 线程，其中包含一些建议。

IE 技巧

IE 始终显示垂直滚动条，无论是否需要。这对于 防止水平跳跃 很有用，但并不总是理想的。要在 IE 中删除它，您可以在 body 元素上将 overflow 设置为 auto。

演示 (Demo)

本文的演示来自 此示例页面。