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

Question

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

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

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

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

Answer 1

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

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

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

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

如果您想知道溢出的奇怪行为：隐藏，请查看这篇文章