溢出：隐藏会影响布局吗？

Question

除了参考JS Fiddle 上的以下示例外，我无法解释这一点 - 在其中，在我引入溢出：隐藏属性后，最后一个蓝色框没有像预期的那样扩展到 100% 的宽度。

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

编辑：这个问题似乎仅限于 webkit 浏览器（例如 Chrome）

Answer 1

这是因为overflow: hidden以及其他属性引入了一个新的块格式化上下文。

您可以在这篇精彩的文章中阅读有关效果：溢出的魔力：隐藏

更新：我已经将您的 jsFiddle 改写成可以正常工作的东西（在 Chrome 上测试）。 我没有在#red和#blue上定义margin-left （由于overflow: hidden会导致不同的行为），我在#yellow上放置了一个margin-right 。