前言

CSS 2.2規範裡containing block一文有提到溢出(overflow)這一詞；而在『CSS大全』定位章節裡同時也有一篇專門介紹溢出。
就像裝水時當水量超過容器時就會溢出，溢出時一般處理方式：一是減少水量，把多餘部分刪去；其二就讓它自然溢出，讓內容隨著文流排列。
除了這兩種方式，整理癖如CSS還有第三種方式！
今天就來介紹CSS遇到溢出的處理方式吧！

什麼是溢出？

首先，一個盒子（box）給它設定好固定值的長跟寬，然後往裡面丟入一大堆內容物（例如：文本內容），當內容物超過了盒子尺寸能夠容納的範圍，就會發生溢出(overflow)了。

而溢出時，CSS有幾種應對方式，藉由設定 overflow 屬性：

• visible
• hidden
• scroll
• auto

四種方式來控制盒子裡面多餘的內容。

overflow: visible

visible作為overflow屬性的預設值，
內容不會被裁切，會自然溢出自身所在盒子之外。

預設為何不直接隱藏內容？

有沒有好奇為何CSS處理溢出預設是讓內容直接溢出呈現而非隱藏？
是因為CSS會避免資料遺失（data loss），當一個網站某地方發生溢出，若是隱藏會導致可能某個表單提交按鈕或一個段落文字內容消失，但網站設計者或是訪問者無法第一時間注意到。

overflow: hidden

若是設為hidden，元素方框內的溢出內容會沿著方框邊緣裁切，沒有任何捲動介面拖移顯示區來獲取方框外的內容，裁切掉的內容即為隱藏了。
這個屬性值下使用者會無法得知裁切掉的內容，所以建議使用在即使內容部分消失也沒關係的元素方框上。

overflow: scroll

若想呈現所有內容但又不想破壞方框佈局，屬性值可設定為scroll。
元素方框內的溢出內容一樣沿著方框邊緣裁切，但能透過某種不改變元素方框形狀卻又能夠呈現內容的機制，例如：網頁瀏覽器會出現滾動條，顯示被裁切的內容。
要注意的是，不管有無溢出情況發生，也就是不管內容多寡，滾動條（或是其他機制）都會出現。
（補充：至於滾動條會不會顯示則以瀏覽器設定為準。）

overflow: auto

屬性值設為auto則是讓使用者代理(User agent)去決定行為，使用者代理（如：瀏覽器）去判斷「只在必要時提供滾動條機制」，當內容超出方框範圍時，它就會啟動滾動條機制。

<div class = "box overflowTest"> Everything in CSS is a box. You can constrain the size of these boxes by assigning values such as width and height. Overflow happens when there is too much content to fit in a box.
</div>
<div class = "box overflowTest">Everything in CSS is a box.</div>

.box.overflowTest{
    height: 100px;
    width: 300px;
    margin: 50px ;
    border: 10px solid red;
    overflow: auto;
}

兩個<div>共用同"box overflowTest"樣式，但文字內容不同，在overflow: auto設定下如圖：

參考資料

書籍 <CSS大全第四版>
Mdn - overflow