为什么当我浮动子容器时，父容器的高度为 0？

浮动内容和容器高度混淆

在CSS中，浮动元素位于正常文档流之外，并且不影响其高度父容器。这种行为似乎违反直觉，尤其是当页面正确呈现时。

理解问题

考虑以下 CSS：

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

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

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

当创建如下 HTML 结构：

<div>
<p>页面将正确呈现，但是经检查，父 div#wrapper 将显示 0px 的高度。发生这种情况是因为浮动内容（如 .content 和 .lbar）被从正常流中删除并占据任何块内容之外的位置。</p>
<p><strong>解决高度问题</strong></p>
<p>为了确保父容器扩展到其浮动内容的高度，有两个主要方法技术：</p>
<ul>
<li>
<strong>溢出：隐藏：</strong> 在容器元素上设置溢出：隐藏会建立一个新的块格式化上下文，这会强制容器考虑其浮动子元素的高度.</li>
<li>
<strong>包含浮动：</strong>存在其他包含浮动的方法，例如使用 inline-block，伪元素，并将浮动元素包装在另一个容器中。</li>
</ul>
<p>理解 CSS 布局的这一方面对于创建具有准确大小和流程的网页至关重要。</p>
</div>

以上是为什么当我浮动子容器时，父容器的高度为 0？的详细内容。更多信息请关注PHP中文网其他相关文章！