Question

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/

Answer 1

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