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

Question

我偶然发现了一些让我感到困惑的 CSS 行为。假设有两个块元素，第一个向右浮动（jsfiddle）：

如果在非浮动元素上将溢出属性设置为隐藏，则该元素会缩小以适应浮动元素宽度jsfiddle：

我实际上对此没有问题，但我想知道为什么会这样。我遇到的问题是以下情况，在溢出设置为隐藏后，非浮动元素的width 设置为100%。我在 Win7 上的 IE9、Firefox 14、Opera 12、Chrome 20 和 Safari 5 中进行了测试，除了 Firefox 显示（jsfiddle）之外的所有这些：

我想要和期望的，以及 Firefox 显示的，与上面的第一张图片相同。那么，谁能解释一下为什么会发生这一切？

Answer 1

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

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

案例 2：现在您告诉 .content 隐藏溢出。所以它隐藏了它之前作为默认行为所做的溢出。

案例 3：您告诉 .content 采用父级的全宽，即 .container，因此它忽略了溢出：隐藏，只是扩展以填充空间。

如果您想知道 overflow:hidden 的奇怪行为，请查看此 ARTICLE