Why Does Setting Overflow to Anything But 'Visible' Create a New Block Formatting Context in CSS2.1?

Why Does CSS2.1 Define Overflow Values Other Than "Visible" to Establish a New Block Formatting Context?

In CSS2.1, overflow values except for "visible" are specified to establish a new block formatting context (BFC). This can be puzzling since overflow's intended purpose is to hide overflow without affecting layout.

Upon delving deeper into the issue, it becomes evident that overflow values apart from "visible" comprise two seemingly unrelated features: BFC creation and overflow hiding. However, as demonstrated historically, floats can extend beyond their parent element, thus hiding the overflow makes sense without altering layout.

Reasons for the Decision

The rationale behind this decision stems primarily from scrolling content. As per the CSS Working Group mailing list:

"If the spec didn't specify this, floats intersecting with scrollable content would require browsers to continuously rewrap the scrollable content (around intruding floats) during scrolling. This would have been computationally expensive and detrimental to scrolling performance."

How It Works

Consider the following scenario: Two fixed-height boxes with overflow set to "visible," where the first box contains a float that extends beyond the parent's height:

<div>
    <p>...</p>
</div>
<div>
    <p>...</p>
    <p>...</p>
</div>

div {
    height: 80px;
}

div:first-child:before {
    float: left;
    height: 100px;
    margin: 10px;
    content: 'Float';
}

When overflow is maintained as "visible," there's no issue because the content is not subject to scrolling. However, when overflow is set to a value other than "visible," the content becomes both clipped by the box's bounds and scrollable. If the second box has overflow: auto, it would resemble this:

[Image of two fixed-height boxes with overflow: auto]

As the float obstructs scrolling, the browser must rewrap the content to ensure it remains visible. Repeating this process every time the content repaints during scrolling can adversely affect performance.

Consistency and Hidden Scrolling

Another apparent misconception is that containers with overflow: hidden simply conceal content and cannot be scrolled. While there's no user interface for scrolling, it's still possible to programmatically scroll the content by adjusting the scrollTop property. Even in this case, the content would need to be rewrapped to avoid float obscuration.

Therefore, any overflow value aside from "visible" results in a BFC for consistency purposes.

Changes in CSS2.1

In CSS2.1, the inclusion of a BFC for overflow values other than "visible" led to changes in how elements interact with floats:

• The entire box with overflow is pushed aside from floats, as it creates a BFC that encapsulates its content.
• Boxes with height: auto and a BFC will stretch vertically to accommodate floats, rather than just fitting their in-flow content.

Summary

The decision to link BFC creation to overflow values other than "visible" was primarily driven by performance considerations and to ensure consistency with programmatic scrolling. Despite the seemingly contradictory behavior, it serves to maintain the integrity of layout and scrolling in complex scenarios involving floats.

The above is the detailed content of Why Does Setting Overflow to Anything But 'Visible' Create a New Block Formatting Context in CSS2.1?. For more information, please follow other related articles on the PHP Chinese website!