为什么带有浮动子项的容器高度为零？

了解带有浮动子项的容器高度

使用 CSS 时，您可能会遇到这样的情况：带有浮动子项的父容器最终会出现高度为零。这种行为可能会令人困惑，因为子级占据了容器内的空间。

问题

考虑以下 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>页面将正确呈现。但是，如果您检查元素，您会注意到 div#wrapper 显示为 0px 高。</p>
<p><strong>为什么会发生</strong></p>
<p>浮动的内容不会影响其容器的高度。在这种情况下，.content 和 .lbar 元素都是浮动的，因此它们会从文档的正常流程中删除。因此，容器不包含不浮动的内容。这允许容器的高度折叠为零，就像它是空的一样。</p>
<p><strong>解决方案</strong></p>
<p>要解决此问题，您可以使用以下方法： </p>
<ul>
<li>
<strong>溢出：隐藏：</strong>在容器上设置此属性将阻止内容溢出其界限之外。这会建立一个新的块格式化上下文，强制容器扩展以容纳其浮动子级。</li>
<li>
<strong>包含浮动：</strong>包含浮动的其他技术包括使用clear属性或添加空div与 明确的：两者；在容器的末尾。</li>
</ul>
<p>理解浮动的这种行为对于使用 CSS 创建布局至关重要。通过采用适当的技术，您可以确保容器具有所需的高度并且页面元素正确定位。</p>
</div>

以上是为什么带有浮动子项的容器高度为零？的详细内容。更多信息请关注PHP中文网其他相关文章！