为什么溢出属性影响元素大小和流量？

我偶然发现了一些让我感到困惑的CSS行为。比方说，有两个块元素，他们的第一个浮动的权利（jsfiddle）： enter image description here 为什么溢出属性影响元素大小和流量？

如果overflow属性设置为隐藏在非浮动的元素，该元素是为了以适应缩水浮动元素宽度jsfiddle： enter image description here

我其实没有问题，但我想知道为什么发生这种情况。我遇到的问题是以下情况，其中溢出设置为隐藏后，非浮动元素的width设置为100%。我在IE9，火狐14，歌剧12，浏览器20和Safari 5 Win7上进行了测试，所有的人，除了火狐秀（jsfiddle）： enter image description here

我希望和预期是什么，什么Firefox的显示，是与上面的第一张图片相同。那么，谁能阐明为什么会发生这种情况？

来源

2012-07-22 alh84001

相关（甚至重复）：http://stackoverflow.com/questions/6128139/can-overflowhidden-affect-布局/ 6128264＃6128264 – kapa 2012-07-22 12:09:25

根据定义“如果容器元素本身包含其他东西，浮动的div将坐在容器的右边缘。”

案例1：.container覆盖了可用的总空间。 .content除了.float（这里的.content不是形状矩形）以外的所有空间，这就是浮动。它实际上溢出来覆盖空间。它的默认行为。

案例2：现在您告诉.content来隐藏溢出。因此它隐藏了之前作为默认行为所做的溢出。案例3：您告诉.content采用父级的全部宽度，即.container，因此它会忽略溢出：隐藏并仅扩展以填充空间。

如果你想知道溢出的怪异的行为：隐藏，检查这个ARTICLE

来源

2012-07-22 12:20:02

这篇文章真的帮了我。要注意的是，在情况1中，'.content'实际上并没有溢出。你可以亲眼看到它的宽度比2）更大。这实际上是与浮游物正常行为。 – alh84001 2012-07-22 12:57:14

为什么溢出属性影响元素大小和流量？

回答

相关问题