Why Does `overflow: hidden` Cause Height Expansion in CSS When Containing Floated Elements?

Overflow: Hidden's Height-Expanding Side Effect

In the world of CSS layout, the overflow: hidden property plays a crucial role in controlling the behavior of content that exceeds its allotted space. However, one unexpected side effect of using this property is that it can lead to the outer element expanding in height to accommodate floated elements.

To understand this phenomenon, let's consider the following example:

<div class="outer">
    <div class="inner-left"></div>
    <div class="inner-right"></div>
</div>

.outer {
    width: 100px;
    border: solid 5px #000;
}
.inner-left {
    float: left;
    height: 200px;
    width: 50px;
    background: #f00;
}
.inner-right {
    float: right;
    height: 200px;
    width: 50px;
    background: #0f0;
}

When the overflow: hidden property is applied to the .outer element, we observe that it expands in height to encompass the two floated elements (.inner-left and .inner-right). Why does this occur?

The explanation lies in the concept of block formatting contexts. A block box with an overflow that is not visible (the default) creates a new block formatting context. Boxes that create new block formatting contexts are defined to stretch to contain their floats by height if they themselves do not have a specified height, defaulting to auto.

In the example above, the .outer element initially has no explicit height, resulting in a default auto value. Since it creates a new block formatting context, the box stretches to accommodate the bottom edges of the floated elements within it, even though the content within the .outer element is shorter.

This side effect of overflow: hidden is not the same as float clearing. Clearance only occurs when the clear property is explicitly used and there are preceding floats to be cleared. Additionally, using a zero-height element or pseudo-element at the end of the container element to force clearance (clearfix) does not cause the outer element to stretch in height.

Understanding this behavior is crucial for effectively managing layouts and preventing unexpected height expansion in your CSS code. By considering the impact of block formatting contexts and float clearance, you can fine-tune your designs to achieve the desired visual outcomes.

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