Properties on CSS overflow

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 w

Answer 1

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.