為什麼當包含浮動子項時，父級 Div 會塌陷到零高度？

零高度父級之謎：浮動子級和容器高度

在網頁設計領域，遇到CSS 中的特殊行為造型可能會令人困惑。當父 div 的高度神秘地縮小到零（儘管包含浮動子元素）時，就會出現這樣一個謎團。為了解開這個謎團，讓我們深入研究 CSS 和 HTML 程式碼：

#wrapper {
  width: 75%;
  min-width: 800px;
}

.content {
  text-align: justify;
  float: right;
  width: 90%;
}

.lbar {
  text-align: justify;
  float: left;
  width: 10%;
}

<div>
<p>套用這些樣式後，頁面可以正確呈現。然而，在檢查元素後，出現了一個奇怪的觀察結果：儘管存在浮動子 div，但父 div #wrapper 的高度為 0px。這種行為提出了一個問題：為什麼父 div 的高度會消失？ </p>
<p>答案在於 CSS 中浮動元素的固有性質。浮動內容本質上是從正常文件流程中刪除的，佔據正常佈局之外的位置。因此，容器的高度僅由其非浮動內容物決定。在這種情況下，由於 #wrapper 中的所有內容都是浮動的，因此容器的高度會折疊為零。 </p>
<p>要解決這個問題，可以採用多種技術：</p>
<ul>
<li>
<strong>溢位: Hidden:</strong> 透過在父div上設定overflow: hide，建立一個新的區塊格式化上下文。這有效地迫使浮動子元素增加容器的高度。 </li>
<li>
<strong>包含浮動：</strong>有各種方法來包含浮動元素，確保父容器的高度適當擴展。其中包括使用偽元素、CSS3 Flexbox 或網格佈局。 </li>
</ul>
<p>透過了解浮動元素的行為並實施適當的遏制技術，開發人員可以防止令人困惑的零高度父 div 現象並保持控制在他們的頁面佈局上。 </p>
</div>

以上是為什麼當包含浮動子項時，父級 Div 會塌陷到零高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！