How Does Non-Visible Overflow in CSS2.1 Create Block Formatting Contexts and Affect Layout?

Overflow Behavior in CSS2.1: Establishing New Block Formatting Contexts

In CSS2.1, the specification mandates that any overflow value other than "visible" establishes a new block formatting context (BFC). This decision has raised questions about the rationale behind merging two seemingly unrelated features: BFC creation and overflow concealment.

Rationale for Establishing BFCs with Non-Visible Overflow

The primary reason for this behavior lies in the need to ensure smooth scrolling in certain scenarios. When a container with overflowing content is scrollable, allowing floats to intersect with that content would require the browser to constantly rewrap the content around the floats as the user scrolls. This rewrapping process would heavily impact scrolling performance.

Effect on Layout for Non-Visible Overflow

When an element with non-visible overflow establishes a BFC, the entire element is pushed aside to make way for any floating elements in the same block formatting context. This behavior prevents the overlap of the element's border box with the margin boxes of floats, ensuring proper layout.

Stretching of Elements with Height: Auto and Non-Visible Overflow

CSS2.1 introduced an additional change whereby an element with height: auto and a non-visible overflow will stretch vertically to match the height of its floats. This change allows such elements to fully contain their floating content without clipping.

Exceptions to Overflow Behavior

Despite the general rule of establishing a new BFC with non-visible overflow, there are exceptions:

• If the element has a fixed height, the float is clipped into the container and the element does not stretch.
• If the element has clear: left or clear: both applied, it will be pushed vertically regardless of whether it has a non-visible overflow or not.

Conclusion

The decision to establish new block formatting contexts with non-visible overflow values in CSS2.1 was primarily driven by the need to enhance scrolling performance and ensure consistent layout in the presence of floats. This behavior, along with the additional change regarding elements with height: auto and non-visible overflow, provides a more robust and predictable layout model.

The above is the detailed content of How Does Non-Visible Overflow in CSS2.1 Create Block Formatting Contexts and Affect Layout?. For more information, please follow other related articles on the PHP Chinese website!