溢出元素：自動受浮動元素影響

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。