如果一个元素的内容对于元素大小来说过大，就有可能溢出元素本身。对于这种情况，网页设计人员有一些候选解决办法，网站建设CSS2允许你从中选择。它还允许定义一个剪裁区域，如果出了这个剪裁区域，这种溢出就会带来问题。

溢出

假设出于某种原因，网页设计中一个元素固定为某个特定大小，但内容在元素中放不下。此时就可以利用overflow属性控制这种情况。

overflow

值：visible | hidden | scroll | auto | inherit

初始值：visible

应用于：块级元素和替换元素

继承性：无

计算值：根据指定确定

默认值visible表明，网页设计元素的内容在元素框之外也可见。一般地，这会导致内容超出其自己的元素框，但不会改变框的形状。以下标记会得到如图10-31所示的结果：div#sidebar {position: absolute; top: 0; left: 0; width: 25%; height: 7em; background:#bbb; overflow: visible;}

如果overflow设置为scroll，元素的内容会在元素框的边界处剪裁——也就是说，溢出的部分将无法看到，不过还是有办法让用户得到这些额外的内容。在Web浏览器中，这可能意味着使用一个滚动条（或类似的东西）或者使用另外某种方法访问内容而不会改变元素本身的形状。图10-32所示就是一种可能的情况，这是由以下标记得到的：

div#sidebar {position: absolute: top: 0; left: 0; width: 15%; height: 7em; overflow: scroll;}

如果使用scroll，应该始终提供某种滚动机制（例如滚动条）。援引规范中的说法，“这会避免动态环境中滚动条出现或消失所带来的问题”。因此，即使元素有足够的空间显示所有内容，也应当显示滚动条。另外，打印一个页面或在打印媒体中显示文档时，内容可能显示为就好像overflow值声明为visible —样。

如果overflow被设置为hidden，元素的内容会在元素框的边界处剪裁，不过不会提供滚动接口使用户访问超出剪裁区域的内容。考虑以下标记：

div#sidebar {position: absolute; top: 0; left: 0; width: 15%; height: 7em; overflow: hidden;}

在这种情况下，被剪裁的内容对用户来说不可用。这会得到如图10-33所示的结果。

图10-33：在内容区边界处剪裁内容

最后还有一个值overflow: auto。这允许用户代理来确定采用何种行为，不过都网页设计人员建议在必要时提供一个滚动机制。这可能是overflow的一个有用的用法，因为用户代理可以把它解释为“只在必要时提供滚动条”（也可能有些用户代理不这样解释，不过一般来讲，用户代理当然可以而且往往应当这样解释）。