##為什麼要有這功能
overflow 是用來控制當元素的內容超出其容器時，該如何處理的屬性。透過設定 visible、hidden、scroll、或 auto，設計師可以選擇顯示、隱藏或是加上滾動條，從而提升網頁內容的可視性及可讀性。這個功能在設計排版時特別重要，因為它確保了內容不會溢出邊界或導致布局破壞。

##核心結構
overflow: visible: 預設值，內容溢出時仍會顯示超出的部分，不限制容器邊界。
overflow: hidden: 隱藏超出容器範圍的內容，不顯示。
overflow: scroll: 無論是否超出內容範圍，都會出現滾動條，方便用戶查看完整內容。
overflow: auto: 當內容超出容器時才顯示滾動條，靈活應對內容長度變化。

##主要功能
控制內容可視性: 當內容溢出容器邊界時，通過設置 overflow 可以決定是否顯示或隱藏多餘內容。
提升用戶體驗: 加上滾動條讓用戶能夠輕鬆瀏覽全部內容，特別是在小屏幕或動態生成內容的情況下。
自適應設計: 結合 auto 讓容器自動判斷是否需要滾動條，增加設計的靈活性。

##注意事項
隱藏內容的潛在影響: overflow: hidden 可能會讓部分重要內容無法顯示，設計時需謹慎使用。
滾動條的美觀度: 設置滾動條後，確保其不會影響整體設計的視覺效果，特別是在移動設備上。
自動與手動設置的平衡: scroll 與 auto 有不同的滾動行為，需根據具體需求選擇。

##簡單範例應用

/* CSS */
.overflow-visible {
    width: 200px;
    height: 100px;
    overflow: visible;  /* 內容超出容器仍會顯示 */
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

.overflow-hidden {
    width: 200px;
    height: 100px;
    overflow: hidden;  /* 隱藏超出容器的內容 */
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

.overflow-scroll {
    width: 200px;
    height: 100px;
    overflow: scroll;  /* 總是顯示滾動條 */
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

.overflow-auto {
    width: 200px;
    height: 100px;
    overflow: auto;  /* 內容超出時才顯示滾動條 */
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}

<!-- HTML -->
<div class="overflow-visible">
    文字超出範圍時，仍會繼續顯示，沒有任何限制。
</div>

<div class="overflow-hidden">
    當文字超出範圍時，內容會被隱藏，不會顯示。
</div>

<div class="overflow-scroll">
    當內容超出範圍時，滾動條會出現，方便用戶檢視完整內容。
</div>

<div class="overflow-auto">
    當內容超出範圍時才會顯示滾動條，否則不顯示。
</div>