为什么当子级浮动时，父级 Div 会折叠到零高度？

了解零父级 Div 高度和浮动子级

在 CSS 中，当 div 包含浮动子级时，有时会导致父级 div具有零高度。鉴于内容在页面上正确呈现，这种现象可能看起来令人困惑。

解释在于 CSS 布局模型。浮动内容（如所提供的 HTML 示例中的“.content”和“.lbar”div）将从文档的正常流程中删除，并放置在其后面的内容旁边。这意味着浮动内容不再影响其容器 div 的高度。

在没有任何非浮动内容的情况下，父 div ("#wrapper") 不包含影响其高度的元素。因此，即使它的子级出现在页面上，它也会折叠到 0px 的高度。

要解决此问题并确保父级 div 保持可见，开发人员可以采用以下技术：

• 溢出隐藏：在父 div 上设置“overflow: hide”会建立一个新的块格式化上下文，强制 div 包含其浮动子级并保持非零高度。
• 非浮动内容： 在父 div 中添加非浮动内容，例如文本节点或透明元素，允许 div根据该内容建立高度。

了解此行为可以防止挫败感，并使开发人员能够有效地创建所需的布局，而不会出现意外的高度问题。

以上是为什么当子级浮动时，父级 Div 会折叠到零高度？的详细内容。更多信息请关注PHP中文网其他相关文章！