可以溢出：隐藏影响布局？ [英] Can overflow:hidden affect layout?

问题描述

除了引用以下 JS Fiddle的示例，我无法解释这一点 - 在其中，最后一个BLUE框不会扩展到100％的宽度，因为我引入了一个overflow：hidden属性。

There's no way for me to explain this except to refer to the following example on JS Fiddle- in it, the last BLUE box does not extend to 100% of the width as expected after I introduce an overflow:hidden attribute.

我在印象下溢出：隐藏将仅影响可见性方面，而不会干扰布局。

I was under the impression overflow:hidden would affect visibility aspects only, and not interfere with layout. Can someone explain what is going on in this example?

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

This problem seems limited to webkit browsers (e.g. Chrome)

推荐答案

这是因为 overflow：hidden 新的 阻止格式化上下文。

您可以在这篇伟大的文章中了解效果：
溢出的魔法：隐藏

You can read about the effects in this great article: The magic of overflow: hidden

UPDATE：我有将你的jsFiddle改写成有用的东西（在Chrome上测试）。而不是在 #red 和 #blue margin-left c>（ overflow：hidden ），我将 margin-right code> #yellow 。

UPDATE: I've rewritten your jsFiddle into something that is working (tested on Chrome). Instead of defining margin-left on the #red and #blue (which would act differently due to overflow: hidden), I've put a margin-right on #yellow.

这篇关于可以溢出：隐藏影响布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！