為什麼當我浮動子容器時，父容器的高度為 0？

浮動內容與容器高度混淆

在CSS中，浮動元素位於正常文件流之外，且不影響其高度父容器。這種行為似乎違反直覺，尤其是當頁面正確呈現時。

理解問題

考慮以下CSS：

當建立如下HTML 結構：

頁將正確呈現，但是經檢查，父div#wrapper 將顯示0px 的高度。發生這種情況是因為浮動內容（如 .content 和 .lbar）被從正常流中刪除並佔據任何區塊內容之外的位置。

解決高度問題

為了確保父容器擴展到其浮動內容的高度，有兩個主要方法技術：

• 溢位：隱藏：在容器元素上設定溢位：隱藏會建立一個新的區塊格式化上下文，這會強制容器考慮其浮動子元素的高度.
• 包含浮動：存在其他包含浮動的方法，例如使用inline-block，偽元素，並將浮動元素包裝在另一個容器中。

理解 CSS 版面的這一方面對於建立具有準確大小和流程的網頁至關重要。

以上是為什麼當我浮動子容器時，父容器的高度為 0？的詳細內容。更多資訊請關注PHP中文網其他相關文章！