為什麼父級 Div 的高度為零且子級浮動？

了解帶有浮動子元素的父Div 的高度

在網頁設計中，div 容器的高度可能會受到影響透過其子元素。但是，當這些子元素浮動時，可能會發生意外行為，導致父級 div 高度為零。

為了說明這一點，請考慮以下CSS：

#wrapper {
  width: 75%;
  min-width: 800px;
}
.content {
  text-align: justify;
  float: right;
  width: 90%;
}
.lbar {
  text-align: justify;
  float: left;
  width: 10%;
}

當您使用此CSS 建立HTML，例如：

<div>
<p>您可能會注意到頁面渲染正確，但是當您檢查DOM 時，“#wrapper”div 的高度似乎為0px。這是因為浮動內容會將其自身從文件的正常流程中刪除，實質上是從文檔樹中刪除。 </p>
<p>這樣做的結果是父 div 的高度不受其浮動子級的影響。因此，父級 div 保持預設高度 0px。 </p>
<p>要解決此問題並確保父級div 展開以包含其浮動內容，您可以在父級上使用“overflow:hidden”屬性分區這會創建一個新的“塊格式上下文”，強制浮動子項保留在父項的邊界內。 </p>
<p>這是更新的 CSS：</p>
<pre class="brush:php;toolbar:false">#wrapper {
  width: 75%;
  min-width: 800px;
  overflow: hidden; /* Added */
}

透過此修改，「#wrapper " div 現在將拉伸以適合其浮動子項，從而使頁面佈局能夠按預期運行。