<div height 覆蓋
<div元素是HTML中常用的一個標簽，用于創建一個容器，并且可以設定其寬度和高度。在一些特定情況下，我們可能會遇到<div height 覆蓋的問題。這意味著我們設置的高度不會起作用，被其內容的高度所覆蓋。在本文中，我們將詳細解釋這個問題，并提供一些代碼案例來說明如何解決這個問題。
代碼案例一：
**HTML代碼：**

<div class="container">
<p>這是一個文本內容。</p>
</div>

**CSS代碼：**

.container {
height: 100px;
background-color: #e0e0e0;
}

在這個例子中，我們設置了一個高度為100像素的容器，背景色為#e0e0e0。然而，當我們在容器中添加文本內容時，容器的高度并沒有按照我們所設定的值進行調整。這是因為默認情況下，容器的高度會根據其內容的高度自動調整，忽略我們所設定的高度值。
為了解決這個問題，我們可以使用CSS的overflow屬性來控制容器中內容超出容器高度時的表現方式。在這個案例中，我們可以將overflow屬性設定為"auto"，這樣當容器中的內容超過容器高度時，會自動顯示滾動條。
**CSS修改后的代碼：**

.container {
height: 100px;
background-color: #e0e0e0;
overflow: auto;
}

代碼案例二：
**HTML代碼：**

<div class="container">
<p>這是一個文本內容。</p>
</div>

**CSS代碼：**

.container {
height: 100px;
background-color: #e0e0e0;
display: flex;
align-items: flex-start;
}

在這個例子中，我們仍然設置了一個高度為100像素的容器，背景色為#e0e0e0。不同的是，我們使用了CSS的flex布局，并將align-items屬性設定為"flex-start"。這樣一來，容器中的文本內容將會從容器頂部開始排列，而不會自動調整容器的高度。
通過這兩個代碼案例，我們可以看到使用overflow屬性或flex布局的方法可以解決div height覆蓋的問題。當我們遇到這個問題時，我們可以根據具體的情況選擇適合的方法進行解決，確保我們所設定的高度能夠正確地生效。