為什麼 CSS2.1 使用「overflow」而不是「visible」來建立區塊格式上下文？

為什麼 CSS2.1 強制使用「Visible」以外的溢位值來建立新的區塊格式化上下文？

在 CSS2.1 中，指定「visible」以外的溢位值來建立新的「區塊格式化上下文」。這項決定引發了人們對組合兩個看似不相關的功能背後的基本原理的質疑：創建區塊格式化上下文 (BFC) 和抑制溢位。

歷史背景和關鍵考慮因素

根據 CSS 郵件列表上的查詢，此決定源於解決與浮動相交的框內滾動的需求。原始 CSS 2.0 規範要求瀏覽器在滾動期間重新包裝入侵浮動周圍的內容，從而導致效能問題。

CSS2.1 修訂透過為「可見」以外的溢位值建立新的 BFC 來防止這種重新包裝。這可以確保：

• 新 BFC 中的內容不會受到浮動的影響。
• BFC 的滾動行為不會受到浮動的影響。

範例

考慮以下內容例如：

<div>...</div>
<div>
  ...:
  ...:
</div>

div {
  height: 80px;
}

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

在CSS 2.0中，使用overflow:visible（預設值），第二個框與浮動元素重疊。然而，使用 Overflow: auto (CSS 2.1)，第二個框會獲得一個新的 BFC，防止浮動與其內容相交。

溢出的含義：隱藏

儘管「overflow:hidden」通常會隱藏溢出的內容，但它仍然允許以程式方式滾動。這很重要，因為包含相交浮動的溢出：隱藏的框還必須建立新的 BFC 以防止滾動期間重新包裝。

CSS2.1 中引入的變更

CSS2 .1 引入了其他變更：

• 阻止格式化上下文根元素（具有溢出值的元素，其他比“可見”）現在垂直拉伸到其浮動的高度。
• 具有溢出：隱藏和高度：自動的框受到其容器邊界的限制，並且不能再與浮動相交。

一致性和性能

最終，決定創建一個新的對於「可見」以外的溢出值的BFC 主要是出於性能考慮以及對處理溢出內容的一致性的期望而驅動的。這種方法優化了滾動性能並保持了可預測的佈局。

以上是為什麼 CSS2.1 使用「overflow」而不是「visible」來建立區塊格式上下文？的詳細內容。更多資訊請關注PHP中文網其他相關文章！