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

Question

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

如果在非浮动元素上将overflow属性设置为hidden，则该元素将缩小以适应浮动元素宽度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，因此它会忽略溢出：隐藏，只是展开以填充空格。

如果您想知道溢出的奇怪行为：隐藏，请检查 ARTICLE