Why Do Non-'Visible' Overflow Values in CSS2.1 Create New Block Formatting Contexts?

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

Understanding the Issue:

CSS2.1 specifies that overflow values other than "visible" create a new "block formatting context" (BFC). But this definition raises concerns because overflow is intended to hide overflow without altering layout.

The Rationale Behind the Decision:

The reasoning behind this specification primarily revolves around the impact on scrolling content. Without this rule, a float intersecting with a scrollable element would require the browser to rewrap the content continuously during scrolling, severely impacting performance.

Implications for Scrolling:

Here's how this decision affects different overflow values:

• Overflow: auto or scroll: In this case, the content can scroll but can't intersect floats. This prevents content from being obscured by floats during scrolling.
• Overflow: hidden: While content can't scroll visibly, it can still be scrolled via JavaScript. Overflow: hidden similarly blocks floats from intersecting the content.

Consistency and Box Behavior:

Establishing a BFC for overflow values other than "visible" ensures consistency. It pushes the entire box away from the float to create a clear path. This occurs regardless of any clear properties. Additionally, a block formatting context root (e.g., an element with overflow: auto) created by overflow can stretch vertically to accommodate the height of its floats due to changes introduced in CSS2.1.

The above is the detailed content of Why Do Non-'Visible' Overflow Values in CSS2.1 Create New Block Formatting Contexts?. For more information, please follow other related articles on the PHP Chinese website!