overflow

CSS overflow 属性作用在块级元素上，它指定当元素的内容超出元素的边框范围时如何显示超出部分的内容。

通过 overflow 属性你可以指定当元素的内容超出元素的边框范围时，是裁剪超出的内容，还是显示滚动条，或者直接显示超出的内容。

overflow 属性的默认值为 visible ，它表示超出的内容将一直可见。 overflow 属性的可用取值有： hidden 、 scroll 和 auto 。

只有当内容元素的父元素指定了明确的宽度或高度的时候，内容元素才可能会发生溢出的情况。如果父元素没有明确的高度，内容元素会一直沿垂直方向上扩展。如果父元素没有明确的宽度，内容元素会一直沿水平方向上扩展。

如果一个元素中只包含有文本，那么在水平方向上不会发生溢出，因为文本会在容器的边部自动断行。但是会在垂直方向上发生溢出。此时可以通过 overflow 属性来控制文本溢出之后如何进行处理。如下图所示：

overflow: scroll 属性会在容器的水平和垂直方向上都生成滚动条。而 overflow: auto 属性则只会在发生内容溢出的方向上出现滚动条。

overflow 属性的取值只有一个，它会同时指定水平和垂直方向上的溢出操作。但是在CSS3中， overflow 属性变为和属性的简写属性。

属性用于指定内容溢出左右两条边时的操作，属性用于指定内容溢出上下两条边时的操作。

因此在CSS3中， overflow 属性接收一个或两个关键字作为值。如果只提供了一个值，那么和属性的值都是该值。如果提供了两个值，第一个指定属性的值，第二个指定属性的值。

但是需要注意的是， overflow 的双值语法目前还没有浏览器支持。但是已经有部分浏览器支持和属性。你可以使用这两个属性来覆盖 overflow 属性的设置。

在CSS3中，还为 overflow 属性添加了2个新的取值： no-display 和 no-content 。

在IE4-6中，当 overflow 属性的取值为 visible 时，和 width 属性会被视为 或 。所以元素会被扩展以适应内容，内容不会超出元素范围之外。

在Firefox浏览器中，当元素内容溢出出现滚动条时，滚动条被添加在元素之外。而在IE浏览器中，滚动条会被放置在元素之内，作为元素的一部分存在。

overflow: visible | hidden | scroll | auto | inherit
                            

CSS3新的语法如下：

overflow:[ visible | hidden | scroll | auto | no-display | no-content ]{1,2}
                            

参数：

overflow: auto;
overflow: hidden;
overflow: scroll;
overflow: visible;
overflow: inherit;