溢出元素：自动受浮动元素影响

Question

有人可以向我解释为什么溢出会产生以下影响。

在下面的jsfiddle中，我有一个Div向左浮动，设置了宽度和高度。 接下来我有一个Content div。您可以将其视为左侧导航和网站布局的内容。

在内容中我有两个除了一个之外相同的Div有溢出：自动另一个没有。具有溢出的一个：auto当前尊重浮动的div并缩短其宽度以避免与它发生冲突。如同另一个只是保持其全宽并在浮动的div下运行。

尽管overflow：auto提供了非常有用的行为，但我不明白为什么它关心浮动的项目。我认为如果一个元素具有一定的宽度且内部的内容不适合，那么它将执行您所请求的行为，但这有点将该行为应用于元素本身

http://jsfiddle.net/9bEDj/1/

有人可以为我澄清这一点并解释为什么这是行为，或者它是否真的应该这样做并且是一个怪癖！

Answer 1

这是因为setting overflow establishes a new block formatting context, and block formatting contexts do not overlap floats。

Answer 2

这是浮动/溢出魔法的精彩描述 http://colinaarts.com/articles/the-magic-of-overflow-hidden/

具有溢出而不是可见的元素应该遵循浮动的预期行为，因此您可以使用它而不会引起任何模糊