<div>標簽是HTML中用于創建一個包含塊級元素的容器。然而，當容器中的內容過多時，容器的高度可能會溢出，導致頁面展示不美觀。為了防止這種情況的發生，我們可以通過一些CSS樣式來控制<div>元素的溢出情況。下面將通過幾個代碼案例來詳細解釋如何使用<div>標簽防止溢出。
案例一： 假設我們有一個<div>容器，并希望當其中的內容過多時自動出現滾動條。可以使用CSS樣式"overflow: auto;"來實現這一效果。代碼如下所示：

<div style="width: 200px; height: 200px; overflow: auto;">
這是一段內容，如果文字過多，則會出現滾動條以展示全部內容。
</div>

上述代碼中，我們設置了容器的寬度和高度，并將溢出樣式設置為"auto"。這樣，當內容超出容器的尺寸時，會自動出現縱向和橫向的滾動條，以便展示全部內容。
案例二： 有時候，我們希望內容溢出時自動隱藏，而不顯示滾動條。這可以通過設置"overflow: hidden;"來實現。代碼如下所示：

<div style="width: 200px; height: 200px; overflow: hidden;">
這是一段內容，如果文字過多，則會被隱藏。
</div>

在上述代碼中，我們同樣設置了容器的寬度和高度，并將溢出樣式設置為"hidden"。這樣，當內容超出容器的尺寸時，超出部分會被隱藏起來，不會呈現在頁面上。
案例三： 有時候，我們希望內容溢出時自動換行，而不是被截斷或隱藏。可以使用CSS樣式"word-wrap: break-word;"來實現這一效果。代碼如下所示：

<div style="width: 200px; height: 200px; word-wrap: break-word;">
這是一段內容，如果文字過多，將會自動換行以適應容器的尺寸。
</div>

在上述代碼中，我們同樣設置了容器的寬度和高度，并將"word-wrap"樣式設置為"break-word"。這樣，當內容超出容器的尺寸時，文字會自動換行以適應容器的大小。
： 通過使用CSS樣式，我們可以輕松地控制<div>元素的溢出情況。通過設置"overflow: auto;"可以實現自動出現滾動條，"overflow: hidden;"可以實現內容隱藏，"word-wrap: break-word;"可以實現自動換行。根據實際需求，選擇適合的樣式可以使頁面展示更加美觀和易讀。