可溢出：隐藏影响布局？

Question

除了引用下面的example on JS Fiddle之外，我没有办法解释这个，其中最后一个BLUE框不会像预期的那样扩展到宽度的100％，因为我引入了overflow：hidden属性。

我在印象溢出：隐藏只会影响可见性方面，而不会影响布局。有人可以解释这个例子中发生了什么吗？

编辑： 这个问题似乎限于WebKit浏览器（例如，浏览器）

Answer 1

这是因为overflow: hidden等性质，引入了一个新block formatting context。

你可以阅读这篇大文章的影响： The magic of overflow: hidden

更新：我已经rewritten your jsFiddle到正在工作的东西（在Chrome测试）。我没有在#red和#blue（由于overflow: hidden而采取不同的行为）定义margin-left，而是在#yellow上放置了margin-right。