html - 可以溢出 :hidden affect layout?

Question

除了引用以下example on JS Fiddle，我没有办法解释这个- 在其中，在我引入 overflow:hidden 属性后，最后一个蓝色框没有像预期的那样扩展到 100% 的宽度。

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

编辑:这个问题似乎仅限于 webkit 浏览器(例如 Chrome)

Answer 1

这是因为 overflow: hidden 在其他属性中引入了一个新的 block formatting context .

您可以在这篇很棒的文章中了解效果: The magic of overflow: hidden

更新:我有 rewritten your jsFiddle进入正在工作的东西(在 Chrome 上测试)。而不是在 #red 和 #blue 上定义 margin-left(由于 overflow: hidden，它们的行为会有所不同) >)，我在 #yellow 上放置了一个 margin-right。