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

Why CSS2.1 Defines Overflow Values Other Than "visible" to Establish a New Block Formatting Context

The CSS2.1 specification mandates that overflow values other than "visible" establish a new block formatting context (BFC). This decision may seem counterintuitive, as overflow is typically used to hide content without affecting layout. However, there are compelling reasons behind this choice.

Scrollable Content and Performance

A primary motivation for defining non-visible overflow values as BFCs is to enhance performance during scrolling. When a floating element intersects with scrollable content outside its parent container, browsers must rewrap the content around the float on every scroll. This constant rewrapping would significantly impact scrolling speed if browsers were required to implement the original CSS2 specification.

Consistency with Other Overflow Values

Another factor in this decision is consistency. While overflow: "hidden" may appear to simply clip content within its container, it can still be programmatically scrolled. Therefore, specifying a non-visible overflow value consistently results in a new BFC, regardless of whether the content is actually scrollable.

Unifying Behavior with Replaced Elements

CSS2.1 also introduced changes in how height: "auto" behaves for block formatting context roots (BFCRs). BFCRs with height: "auto" now stretch vertically to accommodate floats. This aligns with the behavior of replaced elements (e.g., images), which inherently create BFCs and stretch to fit their content.

Benefits of Non-visible Overflow

By defining non-visible overflow values as BFCs, CSS2.1 ensures:

• Improved performance for scrolling content that intersects floats
• Consistent establishment of BFCs, regardless of scrollability
• Unification of behavior with replaced elements
• Avoidance of overlap between floats and BFCRs

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