Overflow

overflow 为CSS中设置当对象的内容超过其指定高度及宽度时如何管理内容的属性。overflow 属性规定当内容溢出元素框时所触发的事件。[1]

说明

这个属性定义溢出元素内容区的内容会如何处理。如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

基本特性

适用于：block-level and replaced elements

JavaScript 语法：object.style.overflow="scroll"

基本语法

overflow-x overflow-y

overflow : visible | auto | hidden | scroll

语法取值

visible：默认值。不剪切内容也不添加滚动条。假如显式声明此默认值， 对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效；

auto：在必需时对象内容才会被裁切或显示滚动条；

hidden：不显示超过对象尺寸的内容；

scroll：总是显示滚动条。

清除浮动

设置overflow的一个更流行的用处是，清除浮动。设置overflow并不会在该元素上清除浮动，它将清除自己(self-clear)。意思就是，应用了overflow(auto或hidden)的元素，将会扩展到它需要的大小以包围它里面的浮动的子元素(而不是叠了起来(collapsing))，假设未定义高度。就像这样

使用说明

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。所有对象的默认值是 visible ，除了 textarea 对象和 body 对象的默认值是 auto 。设置 textarea 对象此属性值为 hidden 将隐藏其滚动条。对于 table 来说，假如 table-layout 属性设置为 fixed ，则 td 对象支持带有默认值为 hidden 的 overflow 属性。如果设为 scroll 或者 auto ，那么超出 td 尺寸的内容将被剪切。如果设为 visible ，将导致额外的文本溢出到右边或左边（视 direction 属性设置而定）的单元格。自IE5开始，此属性在MAC平台上可用。自IE6开始，当你使用 !DOCTYPE 声明指定了 standards-compliant 模式，此属性可以应用于 html 对象。对应的脚本特性为 overflow 。

可能的值

值

描述

visible

默认值。内容不会被修剪，会呈现在元素框之外。

hidden

内容会被修剪，并且其余内容是不可见的。

scroll

内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto

如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit

规定应该从父元素继承 overflow 属性的值。

实例

设置 overflow 属性：

div { width:150px; height:150px; overflow:scroll;}

PC用语

计算机用语，本义是溢出，参考该词条。