CSS溢出的属性

Question

我有两个问题，或者说我需要与CSS溢出属性相关的澄清。据说

  

溢出值不是可见的框将垂直扩展   包含任何浮动的后代框。

关于保证金，据说

  

对于具有溢出值的其他框，边距永远不会崩溃   比可见。

你能否解释这两点与任何实际用途相同......如果你能包括任何一个例子来证明这一点，那就太棒了。

我的演示;

http://jsfiddle.net/emeRJ/13/

http://jsfiddle.net/emeRJ/12/

Answer 1

以溢出扩展

  

溢出值不是可见的框将垂直展开以包围任何浮动的后代框

清除浮动元素时，此属性很有用。一个常见的问题是浮动元素不会被其父元素包含;使用overflow是解决此问题的简便方法。

Take a look at this sample p从div内部浮动 - div不展开以包裹它。如果我们将overflow:hidden添加到div，它会垂直展开以包含其子项。

Here's the final result on JSBin

折叠边距

  

对于溢出值不是可见的框，边距永远不会崩溃。

让我们看看W3C spec有关折叠边距的更多信息（和示例）：

  

某些相邻的边距合并形成一个边距。这些利润被称为“崩溃”。如果没有非空的内容，填充或边界区域或间隙将边缘分开，则边距相邻。

您在问题中包含的声明表示当overflow设置为hidden，scroll或auto时，无法使用此行为。

Answer 2

1）如果你有一个溢出设置为不同于“visible”的元素，元素的高度将根据里面的浮动元素展开。

请查看此示例：http://jsfiddle.net/emeRJ/3/

因为我没有为框定义height，所以它将被内部的浮动块扩展。只是因为溢出不是“可见的”..所以如果你将溢出设置为可见，则框不会考虑浮动元素，并且框的高度将为0（在示例中，如果将溢出更改为可见，则不会看到灰色背景）

因此在使用overflow，float和height（或width）时会有不同的行为。 Overflow会告诉浏览器如何处理无法放入框中的内容（如果您已定义框的尺寸），Float会将元素放在彼此相邻的尺寸上父元素的高度和宽度将界定可见区域

[更复杂]在示例中，当溢出到可见时，如果在内部添加clearer element，您仍然可以强制展开框： http://jsfiddle.net/emeRJ/4/

2）对于第二个，您应该真正阅读@feeela给出的link关于折现边距的信息...... = P

希望这有帮助