從 DOM 技術的角度看，網頁中每一件物件都是「箱」狀的，一段文字、一幅圖像、一個連結，它們的長度、闊度、位置等等都可以由 CSS 控制，若果你沒有設定箱子的大小，它會隨著內容的多寡而自行調整，確保容納並顯示所有內容，但若果箱子的大小被限制了，卻又無法容納所有內容的時候，這時 便是 CSS 的 overflow 屬性發揮作用的時候。

CSS Tricks 網站上 Chris Coyier 有一篇文章介紹 CSS 的 overflow 屬性，文章說，Overflow 的值可以是：visible (預設)、hidden、scroll 及 auto，它還有兩個「姊妹」屬性 overflow-x 及 overflow-y，但不是所有瀏覽器都支援。

Visible

若果你沒有設定 overflow 的值，預設就是 visible，所以除非你要撤銷從上層物件繼承下來的值，否則並不需要做這樣的設定。

 CSS | 
 copy code |
?
 
1
.box {overflow: visible; }

樣本輸出：

可以看到倘若內容太多，它會從箱子的右邊和下邊溢出，溢出的部份是可見的。必須注意一點，溢出的部份不會影響版面的排列，若果箱子的後面有其他內容，情況就是這樣：

所以，當箱子內有文字的時候，我們不應硬性設定箱子的尺寸，又同時設定 overflow 為 visible (或不設定 overflow 的值，以致瀏覽器使用預設的 visible)。

Hidden

與預設的 visible 相反的是 hidden，它使所有滿溢到箱子外的內容完全消失：

倘若你的箱子內有動態內容，而你又不希望滿溢的內容搞亂頁面的排版，這個功能便適合你。注意除非用戶觀看頁面的原始碼，否則隱藏的內容是無法看得見的。所以當箱子內有文字的時候，一般不建議使用 hidden，萬一用戶使用了很大的字體，便會使部份文字被推到箱子外面而消失無蹤。

Scoll

把 overflow 屬性設定為 scroll 會使內容被限制在箱子裡面，並且會有一個橫／直的捲軸棒讓用戶觀看完整的內容：

這個設定會使瀏覽器在任何情況下都顯示捲軸棒，即使根本沒有需要：

Auto

Auto 跟 scoll 很相似，但它在不需要的時候會把捲軸棒隱藏起來：