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

Question

有人可以向我解释为什么溢出具有以下效果。

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

在内容里面我有两个Div，除了一个溢出之外是相同的：另一个不是。具有溢出的那个：auto当前尊重浮动的div并缩短其宽度而不与其冲突。如同另一个只是保持其全部宽度并且落在浮动的div之下。

虽然溢出：自动提供了一个非常有用的行为，我不明白为什么它关心浮动的项目。我想，如果一个元素具有一定的宽度和内部无法容纳，那么它会做你要求的行为的内容，但是这有点运用行为元素本身

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。