CSS：浮动和周围公共区域（背景/边框可视化）或“为什么”；溢出：隐藏“；？

我使用CSS使其变得简单：

.container {
  width: 50%;
  margin: 0 auto;
  padding: 2px;
  background: red;
}
.left {
  float: left;
  background: yellow;
}
.right {
  float: right;
  background: yellow;
}

和HTML：

<div class="container">
  <div class="left">To the left.</div>
  <div class="right">To the right.</div>
</div>

在左边。
向右。

我想知道为什么

容器的
区域不是红色的

在搜索之后，我找到了带有溢出：隐藏的解决方案，但是关于修复的官方文档：当我试图理解它是如何工作的时候，让我哭泣

有谁能解释一下为什么
溢出：隐藏的
可以解决周围的标准问题吗？
因为容器的高度为0
您需要为div提供一个高度，就像浮动内容一样，内容从页面流中移除。本质上，div没有看到其中的子对象，因为这些子对象是浮动的

我给div添加了一个高度
height:20px
将“隐藏”属性应用于元素时，元素中的任何浮动都将占用空间。因此，如果您有一个只包含浮动元素的容器，那么该容器将表现为空的。通过将“overflow”设置为“hidden”，我们强制该容器考虑这些浮动

另一个解决方案是在浮动下面添加一个“clearfix”元素。它可能看起来像这样：

<div class="container">
    <div class="left">To the left.</div>
    <div class="right">To the right.</div>
    <div class="clearfix"></div>
</div>

.clearfix {
    clear: both;
}

就个人而言，我更喜欢将溢出设置为隐藏（如果可能的话），但是有很多clearfix解决方案




编辑：

设置一个设定的高度。如果希望设置高度，可以这样做，但如果希望容器根据浮动上的高度增长或收缩，则需要将溢出设置为隐藏或使用clearfix。
溢出：隐藏导致容器为其内容建立一个新的溢出。如果没有它，浮动将参与一些其他格式上下文，这已从正常流中排除，因此在计算容器高度时不考虑浮动

一旦容器导致建立格式化上下文，它将考虑浮动，即使浮体仍然被排除在其自己的格式化上下文中建立的正常流中。这一点已在本文件中说明。您链接到的部分中没有说明这一点的原因是，这是一个从未真正打算过的副作用，但由于实现限制而产生的副作用。请参阅（以及它链接到的）以获取解释。
为什么
溢出：隐藏
更改容器大小？（我不是-1）我不确定，但我认为这是因为溢流需要某种高度才能正常工作。由于未提供确定的高度属性，溢出必须在其位置放置某种类型的默认高度，以便使用。它固定了div的高度这一事实可能只是一个副作用。这是正确的答案。您需要两个维度。嗯，
clearfix
可以工作。但这会产生新的问题）我很想阅读你的链接。谢谢+1谢谢。我不尝试阅读完整的标准或遵循链接。有趣的是知道
overflow:hidden
对于这样的“黑客”没有缩进+1@gavenkoa不要使用
溢出：隐藏以清除floats@gavenkoa：是的，我也会这样描述它-这就是为什么我建议谨慎使用，如果有的话。@gavenkoa一个不应该使用它们的例子，比较