我有两个与 CSS 溢出属性相关的问题或者更确切地说需要澄清。据说
具有非可见溢出值的框将垂直扩展
包围所有浮动的后代框。
另外关于利润率，据说
对于具有溢出值的框，边距永远不会折叠
比可见的。
您能否用相同的实际用途来解释这两点。如果您可以包含任何示例来证明相同的内容，那就太好了。
我的演示；
http://jsfiddle.net/emeRJ/13/
http://jsfiddle.net/emeRJ/12/
I have 2 questions or rather clarifications I need related to CSS overflow property..It is said that
Boxes with an overflow value other than visible will expand vertically
to enclose any floated descendant boxes.
Also regarding margins, it is said that
Margins will never collapse for a box with an overflow value other
than visible.
Could you please explain these 2 points with any practical use of the same..It would be great if you could include any example to demonstrate the same.
My demos on this;
http://jsfiddle.net/emeRJ/13/
http://jsfiddle.net/emeRJ/12/
发布评论
评论（2）
1）如果您有一个元素的溢出设置为与“可见”不同的值，则该元素的高度将根据内部的浮动元素进行扩展。
检查这个例子： http://jsfiddle.net/emeRJ/3/
因为我还没有定义盒子的高度，它将被里面的浮动块扩展。只是因为溢出不是“可见”..因此，如果将溢出设置为可见，则框将不会考虑浮动元素，并且框的高度将为0（在示例中，如果将溢出更改为可见，则将看不到灰色背景）
所以当同时使用溢出、浮动和高度（或宽度）时会有不同的行为。
Overflow将告诉浏览器如何处理无法放入框中的内容（如果您已经定义了框的尺寸），Float将把元素放在接下来的位置彼此尊重父元素的尺寸，高度和宽度将界定可见区域[甚至更复杂]在示例中，当溢出可见时，如果添加更清晰的元素内：
http://jsfiddle.net/emeRJ/4/
2）对于第二个，你应该真正阅读@feeela 给出的关于折叠边距的链接... =P
希望这有帮助
1) if you have an element that has overflow set to something different than "visible", the height of the element will be expand according to the float elements inside.
check this example: http://jsfiddle.net/emeRJ/3/
since i haven't defined the
heightfor the box, it will be expanded by the floating blocks inside. Only because overflow is not "visible".. So if you set the overflow to visible, the box wont consider the floating elements and the height of the box will be 0 (in the example, if you change the overflow to visible you wont see the gray background)So there are different behaviors when using overflow, float and height (or width) together.
Overflowwill tell the browser what to do with the content that can't fit in the box (if you have defined the dimensions of the box),Floatwill put elements next to each other respecting the dimensions of the parent element, and height and width will delimit the visible area[ even more complicated ] in the example, when the overflow to visible, you could still force the box to expand if you add a clearer element inside:
http://jsfiddle.net/emeRJ/4/
2) for the second, you should really read the link given by @feeela about collapsing margins... =P
Hope this helps
溢出扩展
清除浮动元素时，此属性非常有用。一个常见的问题是浮动元素没有被其父元素包含；使用溢出是解决此问题的简单方法。
看一下这个示例，其中
p从div 内部浮动-div不会展开以包裹它。如果我们将overflow:hidden添加到div，它会垂直扩展以包含其子级。上的最终结果
这是JSBin
让我们看看 W3C 规范 了解更多信息（和示例） ）在折叠边距上：
您在问题中包含的语句意味着当
overflow设置为hidden、scroll或时，无法使用此行为>自动。Expanding with Overflow
This property is useful when clearing floating elements. A common problem is that a floated element doesn't get contained by its parent; using
overflowis an easy way to solve this problem.Take a look at this sample where the
pis floated from inside thediv- thedivdoesn't expand to wrap it. If we addoverflow:hiddento thediv, it expands vertically to contain its child.Here's the final result on JSBin
Collapsing Margins
Let's take a look at the W3C spec for more info (and examples) on collapsing margins:
The statement you included in your question means that this behavior can't be used when the
overflowis set tohidden,scroll, orauto.