Properties on CSS overflow

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/

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

Expanding with Overflow

Boxes with an overflow value other than visible will expand vertically to enclose any floated descendant boxes

This property is useful when clearing floating elements. A common problem is that a floated element doesn't get contained by its parent; using overflow is an easy way to solve this problem.

Take a look at this sample where the p is floated from inside the div - the div doesn't expand to wrap it. If we add overflow:hidden to the div, it expands vertically to contain its child.

Here's the final result on JSBin

Collapsing Margins

Margins will never collapse for a box with an overflow value other than visible.

Let's take a look at the W3C spec for more info (and examples) on collapsing margins:

Certain adjoining margins combine to form a single margin. Those margins are said to “collapse.” Margins are adjoining if there are no nonempty content, padding or border areas or clearance to separate them.

The statement you included in your question means that this behavior can't be used when the overflow is set to hidden, scroll, or auto.