Why Does `overflow: hidden` Expand the Height of a Parent Element with Floated Children?

Overflow: Hidden and Element Height Expansion with Floated Children

In a surprising twist, setting overflow: hidden on an outer element can cause it to grow in height to accommodate floated child elements. To understand why, let's delve into the concept of block formatting contexts.

When a block element with overflow set to a non-visible value (such as hidden) is encountered, it establishes a new block formatting context. Crucially, block formatting context roots (as these elements are called) are expected to stretch vertically to contain their floated descendants, if they do not have an explicit height set.

This behavior stems from a revision introduced in CSS2.1 to address a different issue. The change effectively extended the concept of clearance, where a float's bottom edge is contained by its containing block (parent), to apply to block formatting context roots without a specified height.

In the provided example, the outer element is set to overflow: hidden, triggering the creation of a new block formatting context. Since the outer element does not have a specified height, it defaults to auto and stretches downward to enclose the floated inner elements.

It's important to distinguish this phenomenon from float clearance. Clearance occurs when an element with clear: both or a similar effect forces preceding floats to the top of the container. In contrast, overflowing a block formatting context root to contain floats occurs only within that context and has no effect on elements outside it.

The above is the detailed content of Why Does `overflow: hidden` Expand the Height of a Parent Element with Floated Children?. For more information, please follow other related articles on the PHP Chinese website!