如果一個元素的內容對于元素大小來說過大，就有可能溢出元素本身。對于這種情況，網頁設計人員有一些候選解決辦法，網站建設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的一個有用的用法，因為用戶代理可以把它解釋為“只在必要時提供滾動條”（也可能有些用戶代理不這樣解釋，不過一般來講，用戶代理當然可以而且往往應當這樣解釋）。