CSS溢出的属性 [英] Properties on CSS overflow
问题描述
我有两个问题或澄清我需要与CSS溢出属性相关。据说
除了visible之外，垂直扩展
以包含任何浮动的后代框。
p>
对于溢出值为
而不是可见的框，边框永远不会折叠。
你能用任何实际使用解释这2点吗？如果你可以包括任何例子来证明这一点，那将是非常好的。
我的演示文稿
1）如果你有一个元素的溢出设置为不同于visible，元素的高度将根据里面的float元素扩展。
请检查此示例： http://jsfiddle.net/emeRJ/3/ p>
因为我没有为框定义 height ，它将被内部的浮动块扩展。只是因为溢出不是可见..所以如果你设置溢出可见，框不会考虑浮动元素和框的高度将为0（在示例中，如果你更改溢出到可见，你不会看到灰色背景）
因此，当使用overflow，float和height（或width）在一起时，有不同的行为。
溢出会告诉浏览器如何处理不能放在框中的内容（如果已定义框的尺寸）， Float 会根据父元素的尺寸将元素放置在彼此旁边，高度和宽度将划分可见区域
[甚至更复杂]在示例中，当溢出到可见，如果您添加更清晰的元素：
http://jsfiddle.net/emeRJ / 4 /
2）第二次，你应该阅读链接由@feeela提供关于折叠边距... = P
希望这有助于
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;
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 height for 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.
Overflow will 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), Float will 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
这篇关于CSS溢出的属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
