Why Does `overflow: hidden` Increase the Height of a Parent Container with Floated Children?

Unveiling the Mystery: Why Overflow: Hidden Triggers Height Expansion

In the realm of CSS, the overflow property can drastically alter the behavior of certain visual elements. However, one unexpected side effect is its ability to increase the height of an outer element when used in conjunction with floated elements.

To comprehend this phenomenon, we must delve into the intricacies of block formatting contexts (BFCs). Overflow: hidden triggers the creation of a BFC, a container that houses and influences the behavior of its inner elements.

Crucial to understanding this effect is the concept of "block formatting context roots." These are block boxes within a BFC that lack an explicit height (auto by default). When floats are present within such boxes, the spec dictates that the boxes expand vertically to encompass their floated descendants.

This behavior stems from a CSS2.1 alteration intended to address a separate issue. However, it has led to the side effect observed in the given example, where the outer element expands to accommodate the floated elements.

To clarify, this effect differs from using the clear property for float clearance. Clearance exclusively clears preceding floats; it does not directly affect the outer element's height. However, using clear within the outer element can trigger height expansion as a consequence of its status as a following sibling of the floated elements. This technique, known as "clearfix," utilizes a zero-height element to force float containment and subsequent container expansion.

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