为什么父级 Div 的高度为零且子级浮动？

了解带有浮动子元素的父 Div 的高度

在网页设计中，div 容器的高度可能会受到影响通过其子元素。但是，当这些子元素浮动时，可能会发生意外行为，导致父级 div 高度为零。

为了说明这一点，请考虑以下 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>
<p>您可能会注意到页面渲染正确，但是当您检查 DOM 时， “#wrapper”div 的高度似乎为 0px。这是因为浮动内容会将其自身从文档的正常流程中删除，实质上是从文档树中删除。</p>
<p>这样做的结果是父 div 的高度不受其浮动子级的影响。因此，父级 div 保持默认高度 0px。</p>
<p>要解决此问题并确保父级 div 展开以包含其浮动内容，您可以在父级上使用“overflow:hidden”属性分区这会创建一个新的“块格式上下文”，强制浮动子项保留在父项的边界内。</p>
<p>这是更新的 CSS：</p>
<pre class="brush:php;toolbar:false">#wrapper {
  width: 75%;
  min-width: 800px;
  overflow: hidden; /* Added */
}

通过此修改，“#wrapper " div 现在将拉伸以适合其浮动子项，从而使页面布局能够按预期运行。