带有溢出的元素：受浮动元素影响的自动

Question

谁能给我解释一下为什么溢出会有以下效果。

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

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

虽然 overflow:auto 给出了一个非常有用的行为，但我不明白为什么它关心浮动项目。我想如果一个元素有一定的宽度并且里面的内容不适合，那么它会做你请求的行为，但这有点是将行为应用到元素本身

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

有人可以为我澄清这一点并解释为什么这是这种行为，或者它实际上不应该这样做，这是一个怪癖！

Answer 1

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

除了可见之外的溢出元素应该尊重浮动元素的预期行为，因此您可以在不引起任何模糊的情况下使用它

Answer 2

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