Why Does `overflow: hidden` Cause Unexpected Height Growth in Containers with Floated Elements?

Overflow: Hidden and Unexpected Height Growth of Floated Elements

Question:
When overflow: hidden is applied to an outer element containing floated elements, why does the outer element unexpectedly grow in height to contain them?

Answer:
The unexpected growth in height arises because overflow: hidden creates a new block formatting context (BFC). BFC roots, which include elements with overflow that isn't visible, extend their height to accommodate floats if they don't have a specified height.

According to the CSS spec, block formatting context roots "stretch to contain their floats by height if they themselves do not have a specified height, defaulting to auto." This height increase also applies to floated descendants whose bottom margin edge exceeds the BFC root's bottom content edge.

Distinction from Clearing Floats
Note that this behavior differs from float clearance, which only occurs when the clear property is applied and there are preceding floats to be cleared. In this case:

• Using clear: both on an element outside the BFC root clears the floats but does not cause the outer element to stretch.
• Placing a zero-height element with clear: both inside the BFC root ensures that the outer element stretches downward to accommodate the bottom edge of the floated elements (known as "clearfix").

The above is the detailed content of Why Does `overflow: hidden` Cause Unexpected Height Growth in Containers with Floated Elements?. For more information, please follow other related articles on the PHP Chinese website!