为什么容器不会自动清除浮动

学习 CSS 时遇到的障碍之一（以及 “啊哈”时刻）就是关于清除浮动的问题。如果您不知道我在说什么，请查看经典的 浮动详解。

我特别想谈谈“塌陷”的问题，即包含浮动元素的元素在计算其高度时不考虑这些浮动元素。例如，仅包含浮动元素的父元素将具有零高度。这对 CSS 新手来说令人惊讶和困惑，并且似乎违反直觉。

解决它通常很简单。在父元素上使用任何 overflow 值的 hidden 或 auto 都会“修复”它。 clearfix 也很受欢迎。

但是，这些“修复”导致人们认为这种行为从一开始就是“错误的”¹。令人困惑？当然。应该有更好的控制选项吗？绝对的。错误的？不完全是。如果所有容器都扩展以包含其浮动后代，我们会抱怨得更厉害，并且这个问题可能更难解决。

经典示例

我们将使用 Eric Meyer 七年前提供的这个示例。

<p>
 ...text...
 <img src="sunset.jpg" class="callout" />
 ...text...
</p>
<p>
 ...text...
</p>

该调用类，例如，会将图像浮动到左侧并应用一些边距。这就是我们现在得到的结果

这正是我们想要的，正确的文本重排。为了实现这一点，上一段需要“塌陷”，并让浮动图像从其底部突出。

如果上一段自动扩展以包含浮动，我们将得到以下结果

正如 Eric 所说

这是设计师永远不会接受的。

我同意。假设找不到任何花哨的解决方法来解决它，这可能是一个更糟糕的问题。

是否应该有更好的解决方案？

是的，可能吧。我见过有人建议

overflow: contain;

这可能有效，但如果您想隐藏水平溢出怎么办？我们已经有了 overflow: hidden，它已经包含了浮动，可以工作，但这在语义上有点令人困惑。可以有一个全新的属性，例如

contain: floats | collapse | inherit;

但我不确定，他们不能一直添加新属性，所以这需要认真审查。

---

¹ 我还想在这里补充一点，我经常听到人们说“浮动将元素从文档流中移除”，这不是真的。浮动元素仍然会影响内联元素（这有点关键），以及其他浮动块级元素。如果浮动元素被“从文档流中移除”，它们将不会影响任何内容（如绝对定位元素）。