为什么当包含浮动子项时，父级 Div 会塌陷到零高度？

零高度父级之谜：浮动子级和容器高度

在网页设计领域，遇到 CSS 中的特殊行为造型可能会令人困惑。当父 div 的高度神秘地缩小到零（尽管包含浮动子元素）时，就会出现这样一个谜团。为了解开这个谜团，让我们深入研究 CSS 和 HTML 代码：

#wrapper {
  width: 75%;
  min-width: 800px;
}

.content {
  text-align: justify;
  float: right;
  width: 90%;
}

.lbar {
  text-align: justify;
  float: left;
  width: 10%;
}

<div>
<p>应用这些样式后，页面可以正确呈现。然而，在检查元素后，出现了一个奇怪的观察结果：尽管存在浮动子 div，但父 div #wrapper 的高度为 0px。这种行为提出了一个问题：为什么父 div 的高度会消失？</p>
<p>答案在于 CSS 中浮动元素的固有性质。浮动内容本质上是从正常文档流中删除的，占据正常布局之外的位置。因此，容器的高度仅由其非浮动内容物决定。在这种情况下，由于 #wrapper 中的所有内容都是浮动的，因此容器的高度会折叠为零。</p>
<p>要解决此问题，可以采用多种技术：</p>
<ul>
<li>
<strong>溢出: Hidden:</strong> 通过在父div上设置overflow: hide，创建一个新的块格式化上下文。这有效地迫使浮动子元素增加容器的高度。</li>
<li>
<strong>包含浮动：</strong>存在各种方法来包含浮动元素，确保父容器的高度适当扩展。其中包括使用伪元素、CSS3 Flexbox 或网格布局。</li>
</ul>
<p>通过了解浮动元素的行为并实施适当的遏制技术，开发人员可以防止令人困惑的零高度父 div 现象并保持控制在他们的页面布局上。</p>
</div>

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