為什麼當子級浮動時，父級 Div 會折到零高度？

了解零父級Div 高度和浮動子級

在CSS 中，當div 包含浮動子級時，有時會導致父級div具有零高度。鑑於內容在頁面上正確呈現，這種現象可能看起來令人困惑。

解釋在於 CSS 版面模型。浮動內容（如所提供的 HTML 範例中的“.content”和“.lbar”div）將從文件的正常流程中刪除，並放置在其後面的內容旁邊。這意味著浮動內容不再影響其容器 div 的高度。

在沒有任何非浮動內容的情況下，父 div ("#wrapper") 不包含影響其高度的元素。因此，即使它的子級出現在頁面上，它也會折疊到 0px 的高度。

要解決此問題並確保父級div 保持可見，開發人員可以採用以下技術：

• 溢位隱藏：在父div 上設定「overflow : hide」會建立一個新的區塊格式化上下文，強制div 包含其浮動子級並保持非零高度。
• 非浮動內容： 在父 div 中新增非浮動內容，例如文字節點或透明元素，允許 div根據該內容建立高度。

了解此行為可以防止挫折感，並使開發人員能夠有效地創建所需的佈局，而不會出現意外的高度問題。

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