為什麼帶有浮動子項的容器高度為零？

了解具有浮動子項的容器高度

使用CSS 時，您可能會遇到這樣的情況：帶有浮動子項的父容器最終會出現高度為零。這種行為可能會令人困惑，因為子級佔據了容器內的空間。

問題

考慮以下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>

頁面將正確呈現。但是，如果您檢查元素，您會注意到 div#wrapper 顯示為 0px 高。

為什麼會發生

浮動的內容不會影響其容器的高度。在這種情況下，.content 和 .lbar 元素都是浮動的，因此它們會從文件的正常流程中刪除。因此，容器不包含不浮動的內容物。這允許容器的高度折疊為零，就像它是空的一樣。

解決方案

要解決此問題，您可以使用以下方法：

• 溢出：隱藏：
在容器上設定此屬性將阻止內容溢出其界限之外。這會建立一個新的區塊格式化上下文，強制容器擴展以容納其浮動子級。
• 包含浮動：
包含浮動的其他技術包括使用clear屬性或添加空div與 明確的：兩者；在容器的末尾。

理解浮動的這種行為對於使用 CSS 建立佈局至關重要。透過採用適當的技術，您可以確保容器具有所需的高度並且頁面元素正確定位。

以上是為什麼帶有浮動子項的容器高度為零？的詳細內容。更多資訊請關注PHP中文網其他相關文章！