overflow:hidden on div tag affects background color

Question

The definition of overflow:hidden states that :

the overflowing content is completely hidden, not accessible to the user.

from: http://

Answer 1

That's because overflow: hidden affects margin collapse.

p elements have some vertical margin by default. According to the spec, it collapses with the margin of the parent div:

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Adjoining vertical margins collapse_{^{, except [... not relevant]}}

[... The] top margin of a box and top margin of its first in-flow child [are adjoining]

However, overflow: hidden prevents that:

Margins of elements that establish new block formatting contexts (such as floats and elements with overflow other than visible) do not collapse with their in-flow children.