<div>超出是在CSS中常見的問題之一。在網頁布局中，我們常常使用<div>元素來創建容器，它可以用來包裹其他元素并進行樣式設計。然而，當子元素的內容超出了<div>的大小時，就會出現內容溢出的情況。本文將通過幾個代碼案例詳細解釋如何處理<div>中的內容超出問題。
<b>案例一：</b> 假設我們有一個<div>容器，寬度為300像素，高度為200像素。我們在其中放置了一個長度為400像素的文本內容。此時，因為文本內容長度超過了<div>容器的寬度，我們會發現文本內容會溢出到<div>容器外。

<code>
<div style="width: 300px; height: 200px; border: 1px solid black; overflow: hidden;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non enim ut lectus feugiat interdum at vitae purus.
</div>
</code>

從上述代碼中可以看出，我們使用了CSS樣式屬性overflow: hidden來解決內容溢出問題。這個屬性可以將超出容器范圍的內容進行隱藏，不會影響其他布局。
<b>案例二：</b> 在某些情況下，我們希望超出容器的內容能夠顯示出來，而不是被隱藏起來。這時候，我們可以使用overflow: scroll屬性。

<code>
<div style="width: 300px; height: 200px; border: 1px solid black; overflow: scroll;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non enim ut lectus feugiat interdum at vitae purus.
</div>
</code>

在上述代碼中，我們將overflow屬性的值設置為scroll。這個屬性的作用是在內容超出容器的時候顯示滾動條，方便用戶查看被隱藏的內容。
<b>案例三：</b> 除了隱藏超出容器的內容和顯示滾動條外，我們還可以通過設置overflow: auto屬性來實現內容溢出時自動顯示或隱藏滾動條的功能。

<code>
<div style="width: 300px; height: 200px; border: 1px solid black; overflow: auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non enim ut lectus feugiat interdum at vitae purus.
</div>
</code>

在上述代碼中，我們將overflow屬性的值設置為auto。這樣做的好處是，它會根據內容是否溢出來決定是否顯示滾動條。當內容沒有超出容器時，不會顯示滾動條；只有在內容溢出時才會顯示滾動條。
<div>超出問題在CSS布局中非常常見。通過使用適當的CSS屬性，我們可以很容易地解決內容溢出問題。本文簡要介紹了三個常用的處理方法：隱藏超出內容、顯示滾動條和自動顯示/隱藏滾動條。根據具體的布局需求，我們可以選擇合適的方法來解決<div>超出問題。