為什麼 CSS2.1 使用「overflow」而不是「visible」來建立區塊格式上下文？-css教學-PHP中文網

首頁

web前端

css教學

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

Barbara Streisand

Dec 07, 2024 pm 06:10 PM

Why Does CSS2.1 Use `overflow` Other Than

為什麼 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中文網其他相關文章！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

Laravel 教程

1597

PHP教程

1488

Related knowledge

CSS教程，用於創建加載旋轉器和動畫 Jul 07, 2025 am 12:07 AM

創建CSS加載旋轉器的方法有三種：1.使用邊框的基本旋轉器，通過HTML和CSS實現簡單動畫；2.使用多個點的自定義旋轉器，通過不同延遲時間實現跳動效果；3.在按鈕中添加旋轉器，通過JavaScript切換類來顯示加載狀態。每種方法都強調了設計細節如顏色、大小、可訪問性和性能優化的重要性，以提升用戶體驗。

解決CSS瀏覽器兼容性問題和前綴 Jul 07, 2025 am 01:44 AM

處理CSS瀏覽器兼容性和前綴問題需理解瀏覽器支持差異並合理使用廠商前綴。 1.了解常見問題如Flexbox、Grid支持不一，position:sticky失效，動畫表現不同；2.查閱CanIuse確認特性支持情況；3.正確使用-webkit-、-moz-、-ms-、-o-等廠商前綴；4.推薦使用Autoprefixer自動添加前綴；5.安裝PostCSS並配置browserslist指定目標瀏覽器；6.構建時自動處理兼容性；7.老項目可用Modernizr檢測特性；8.不必追求所有瀏覽器一致，確

顯示：內聯，顯示：塊和顯示：內聯塊之間有什麼區別？ Jul 11, 2025 am 03:25 AM

Themaindifferencesbetweendisplay:inline,block,andinline-blockinHTML/CSSarelayoutbehavior,spaceusage,andstylingcontrol.1.Inlineelementsflowwithtext,don’tstartonnewlines,ignorewidth/height,andonlyapplyhorizontalpadding/margins—idealforinlinetextstyling

使用CSS剪輯路徑創建自定義形狀 Jul 09, 2025 am 01:29 AM

使用CSS的clip-path屬性可以裁剪元素為自定義形狀，如三角形、圓形缺口、多邊形等，無需依賴圖片或SVG。其優勢包括：1.支持circle、ellipse、polygon等多種基本形狀；2.可響應式調整，適配移動端；3.易於動畫化，可結合hover或JavaScript實現動態效果；4.不影響佈局流，僅裁剪顯示區域。常見用法如圓形裁剪clip-path:circle(50pxatcenter)和三角形裁剪clip-path:polygon(50%0%,1000%,00%)。注意

造型與CSS不同訪問的鏈接 Jul 11, 2025 am 03:26 AM

設置訪問過鏈接的樣式能提升用戶體驗，尤其在內容密集型網站中幫助用戶更好導航。 1.使用CSS的:visited偽類可定義已訪問鏈接樣式，如顏色變化；2.注意瀏覽器出於隱私限制僅允許修改部分屬性；3.顏色選擇應與整體風格協調，避免突兀；4.移動端可能不顯示該效果，建議結合其他視覺提示如icon輔助標識。

如何使用CSS創建響應式圖像？ Jul 15, 2025 am 01:10 AM

要使用CSS創建響應式圖片，主要可通過以下方法實現：1.使用max-width:100%和height:auto讓圖片在保持比例的同時自適應容器寬度；2.結合HTML的srcset和sizes屬性智能加載適配不同屏幕的圖片源；3.利用object-fit和object-position控製圖片裁剪與焦點展示。這些方法共同確保圖片在不同設備上清晰、美觀地呈現。

什麼是常見的CSS瀏覽器不一致？ Jul 26, 2025 am 07:04 AM

不同瀏覽器對CSS解析存在差異，導致顯示效果不一致，主要包括默認樣式差異、盒模型計算方式、Flexbox和Grid佈局支持程度及某些CSS屬性行為不一致。 1.默認樣式處理不一致，解決方法是使用CSSReset或Normalize.css統一初始樣式；2.舊版IE的盒模型計算方式不同，建議統一使用box-sizing:border-box；3.Flexbox和Grid在邊緣情況或舊版本中表現有差異，應多測試並使用Autoprefixer；4.某些CSS屬性行為不一致，需查閱CanIuse並提供降級

揭開CSS單元的神秘面紗：PX，EM，REM，VW，VH比較 Jul 08, 2025 am 02:16 AM

CSS單位的選擇取決於設計需求和響應式要求。 1.px用於固定尺寸，適合精確控制但缺乏彈性；2.em是相對單位，受父元素影響易導致級聯問題，rem則基於根元素更穩定，適合全局縮放；3.vw/vh基於視口大小，適合響應式設計，但需注意極端屏幕下的表現；4.選擇時應根據是否需要響應式調整、元素層級關係及視口依賴程度來決定，合理搭配使用可提升佈局靈活性與維護性。

See all articles

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

熱AI工具

Undress AI Tool

Undresser.AI Undress

AI Clothes Remover

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題