即使页面上只有一个元素它也是一个矩形的盒模型。其大小、位置、行为都可以通过CSS来控制。这里的行为是指当盒模型内部以及周围的内容发生变化时 的表现。例如，如果你没有给一个盒模型指定一个高度，那么它就会随着内容的增加变得越来越高。但是如果当你为盒模型指定一个高度、而其内部的内容不能与其 完全匹配时又会怎么样呢？这时就要用到CSS中的overflow属性了，它允许你来设定如何处理多余的内容。

overflow有四个属性：visible（默认属性）、hidden、scroll和auto。此外它还有两个姊妹属性:overflow-x和overflow-y，这两个使用的相对较少。

让我们看看每个属性的具体使用方法。

Visible

如果你没有设定overflow属性，其默认值就是visible。因此，一般意义上说没有必要刻意声明其属性值为visible，除非是要覆盖基之前继承的属性。

需要注意的一点是，虽然盒模型内部的内容溢出到外围，但是不影响其它元素的浮动。

一般说来，对于内部有文本内容的盒模型来说不能简单地设定一个固定高度。

Hidden

和默认属性visible功能恰恰相反的属性是hidden，它会隐藏掉所有超出盒模型之外的内容。

对于动态内容和解决可能由于overflow影响布局的问题，它显得十分有用。但是，在大脑中一定要有这样一个意识，就是使用方法来隐藏文字不利于页面的可用性。例如，用户将默认字体设置到比你预计得要大时，就会有内容溢出，这些内容将会从用户的视野中消失。

Scroll

把overflow的值设为scroll，可以防止盒模型内的内容溢出到外围，但是它提供了一个滚动条，通过它可以查看盒内部的所有内容。

需要注意的是，设定此值后，在盒模型的水平、垂直两个方向都会出现滚动条，即使其内容只需要一个就足够了。

auto

overfollow的auto值和scroll差不多，不过它只在需要的时候才会出现滚动条。

浮动清除

最不可思议的是，使用overflow属性的多数情况不是为了处理溢出内容，而是用来清除浮动。设置overflow并不会清除元素本身的浮动，元 素是自身来清除浮动的。这就意味着，设置了overflow属性（auto或者hidden）的元素，在其高度未设定的情况下会随着其内部浮动元素的增大 而增大。

更多细节可以参照这篇 All About Floats.

跨浏览器问题

和约大多数CSS规则一样，overflow也存在着跨浏览器的问题。

滚动条在盒模型内部还是外部

Firefox是放置在盒模型的外部，而IE则是内部。我相信在这一点上只有IE才是正确的（它的确应该出现在盒模型的内部）。

一定要留意这个差别。

IE8扩展盒模型中的bug

IE 8 有很多新的bug，其中包括非常严重的一个，它会让整个页面都隐藏起来。

更多细节

破坏浮动布局

IE 6、7、8中，overflow为visible时，它会在水平方向扩展宽度直到显示出所有的内容为止（例如一张图片）。在浮动多栏布局中这是一个让人头疼的问题，一栏的自动扩展会把其它栏挤到下去，更严重的情况下会打乱整个布局。

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

在老式的IE中是可以的，但是现在不行了。像多数表单元素一样，滚动条不能使用CSS来设定样式。我不能说这样是好还是不好，但是整个网站的内容都被滚动条包围着的确很难看。如果你需要设定滚动条的样式，那么你最好使用JavaScript。

IE中的“技巧”

无论是否必要，IE总会显示垂直滚动条。这里可以完美解决这个问题，但并不是任何情况下都需要。想在IE中移除掉它，可以给body设置overflow为auto。

示例

本文中的演示可以在这个页面中找到。

转载请注明出处:
英文地址：http://css-tricks.com/the-css-overflow-property/
中文地址：http://www.dudo.org/article/CSSJS/289.htm

转载请注明：夜阑小雨 » CSS中的overflow属性