How does setting `overflow: hidden` prevent floating element overflow?

Why Overflow Hidden Resolves Floating Element Overflow

Floating elements can sometimes extend beyond the boundaries of their container, causing layout issues. To address this, web developers often resort to adding a "clear" div or using "position: absolute" on the floated elements. However, a cleaner solution is to set the overflow property of the parent container to "hidden."

Setting overflow to "hidden" works because it creates a block formatting context (BFC). A BFC is a self-contained rendering environment that isolates its contents from the surrounding page layout.

The specifications for block formatting contexts state that:

"Block formatting contexts are important for the positioning (see float) and clearing (see clear) of floats. The rules for positioning and clearing of floats apply only to things within the same block formatting context. Floats do not affect the layout of things in other block formatting contexts, and clear only clears past floats in the same block formatting context."

In other words, elements within a BFC are unaffected by the position and flow of elements outside the BFC. This isolated rendering environment prevents floated elements from extending beyond the boundaries of the container.

By setting overflow to "hidden," we effectively create a BFC for the parent container, ensuring that the floated elements remain confined within the container and do not escape. This approach provides a clean and efficient solution to the issue of floating elements overflowing their containers.

Reference:

• [CSS2 Specification: Block Formatting Contexts](https://www.w3.org/TR/CSS2/visuren.html#block-formatting)

The above is the detailed content of How does setting `overflow: hidden` prevent floating element overflow?. For more information, please follow other related articles on the PHP Chinese website!