CSS中overflow属性介绍

原文地址：http://blog.sina.com.cn/s/blog_51048da701017yyp.html

overflow属性规定当内容溢出元素框时发生的事情，有四个参数，分别是：

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

hidden：内容会被修剪，但是浏览器不会显示供查看内容的滚动条。

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

auto：由浏览器决定如何显示。如果需要，则显示滚动条。

下面分别说一下各个参数的用法：

1.visible

如果你不设置overflow属性，则默认的属性值就是visible。所以一般而言，并没有什么理由特别的设定overflow的属性为visible除非你想覆盖它在其他地方设定的值。请看下图：

2.hidden

关于hidden要说的比较多，因为用到它的地方还比较多。

首先，我们知道hidden，顾名思义，就是要隐藏掉超出盒子的所有内容，在网页构建的过程中，hidden的使用也比较多，有时候是为了防止布局被撑开，有时候是为了配合其它规则实现文字截断，还有时候纯粹是为了创建块级上下文。但是，很多人对这个属性是存在着一定的误解的。

overflow:hidden并不隐藏所有溢出的子元素

在css2.1规范中，对overflow的定义如下：

This property specifies whether content of a block container element is clipped when it overflows the element’s box. It affects the clipping of all of the element’s content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.

此属性(overflow)规定，当一个块元素容器的内容溢出元素的盒模型边界时是否对其进行剪裁。它（此属性）影响被应用元素的所有内容的剪裁。但如果后代元素的包含块是整个视区（通常指浏览器内容可视区域，可以理解为body元素）或者是该容器（定义了overflow的元素）的父级元素时，则不受影响。

这里出现了一个重要的概念即“包含块”，其实包含块就是：一个绝对定位的元素，其包含块是最近的拥有relative或者absolute定位属性的祖先元素，如果任何一级祖先元素都不符合，则其包含块是body元素。

这段话就说明，一个绝对定位的元素是否被overflow:hidden隐藏，要看其包含块相对于overflow:hidden的位置来决定。

实际上在css2.1规范的11.1节，还有更明确的说明：

A descendant box is positioned absolutely, partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block。

一个绝对定位的后代块元素，部分位于容器之外。这样的元素是否剪裁并不总是取决于定义了overflow属性的祖先容器；尤其是不会被位于他们自身和他们的包含块之间的祖先容器的overflow属性剪裁。

理论明白了，我们看下在实际的工作中，怎么应用呢？

如果要彻底隐藏掉容器的所有子元素，不仅要设置overflow:hidden,还要让容器作为所有子元素的包含块，也就是为容器设置position属性。

举个例子：

<div class="outer" style="width:100px; height:100px;"><div class="inner" style="overflow:hidden;"><span style="position:absolute; top:-20px;"></span></div></div>

如果把position:relative属性加在inner里，绝对定位的元素会被隐藏；如果加在标签outer里，绝对定位的元素将不会受到影响。这样的话，如果我们想让inner里的子元素正常被隐藏，又不希望绝对定位的子元素被隐藏，就可以在inner的父标签上添加position属性。

overflow:hidden+zoom:1清除浮动

 此方法优点在于代码简洁，涵盖所有浏览器，可谓不错的选择啊。不过也是有问题的，就是这个overflow:hidden;是个小炸弹，要是里面的元素要是想来个margin负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的。

3.scroll

设置一个盒子的overflow值为scroll将会隐藏掉渲染到盒子之外的内容，但是它将会提供一个滚动条在盒子内部滚动，从而可以查看剩下的内容。值得注意的是，使用scroll将会同时产生水平和垂直两个滚动条，就算内容只需要其中一个。

我们可以通过控制overflow-x:hidden;overflow-y:hidden;来控制滚动条的隐藏。

4.auto

overflow的auto值很像scroll，不同的是auto属性只在盒子需要的时候给它一个滚动条。