CSS布局中BFC的詳細介紹

本篇內容介紹了“CSS布局中BFC的詳細介紹”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

目錄

• 前言

• 目錄

• 什么是 BFC

• BFC 是布局中的迷你布局

• 創建一個 BFC 的常用方式

• 創建 BFC 的新方式

什么是 BFC

一個簡單的浮動的示例就能明白 BFC 的行為在下面的示例中我們創建一個 box 元素該元素包裹一段文字和一個浮動的圖片。 如果文字內容多的話文字將環繞著整個浮動圖片box 的邊框會把他們整個包裹起來。

文字環繞著浮動元素

但如果把一些文字刪除就沒有足夠的文字去環繞圖片浮動元素了同時由于浮動元素脫離文檔流box 元素的邊框高度就會隨文字的減少而降低。

沒有足夠的文字box 元素邊框的高度就會低于浮動元素的高度

之所以會發生這種情況是由于當我們浮動一個元素后box 元素仍然保持原來的寬度是文字所占的空間縮短了以給浮動元素騰出位置這就是為什么背景和邊框能夠看起來包裹住了浮動元素。

我們通常會使用兩種不同的方式來解決這個問題一種是使用 clear hack就是在 文字和圖片的下方插入一個 div 并將它的 CSS clear 屬性設值為 both。另外一種方法是使用 overflow 屬性 把它設值成非默認值 visible的值。

使用 overflow: auto 后 box 就能包裹浮動元素了

overflow 之所以能夠有效是因為當它的是是非 visible 時會創建一個 BFC而 BFC 的功能之一就是包裹浮動元素。

BFC 是布局中的迷你布局

你可以把 BFC 當做你頁面中的一塊小布局當一個元素被創建成 BFC 后它其中的所有元素都會被它包裹。正如我們所見當 box 元素變成 BFC 后它其中的浮動元素就再也沒能突破它的底部。除此之外BFC 還有一些有用的功能。

BFC 可以阻擋外邊距疊加margins collapsing

理解外邊距疊加是另外一個被低估的 CSS 技巧。在接下來的示例里我創建了一個背景灰色的 div這個 div 含有兩個段落div 元素的 margin-bottom 為 40px同時每個段落都有 20px 的 margin-top 與 margin-bottom。

由于 p 元素的邊緣與 outer 元素的邊緣之間沒有任何東西所以 outer 與 p 的 margin 會疊加p 會與 outer 的頂部與底部齊平p 對外的 margin 似乎與 outer 的 margin 合并了使我們無法在段落的上下看到 outer 的灰色背景。

由于 margin collapse外邊距疊加我們看到 outer 內部上下沒有灰色背景

如果我們把 outer 元素變成 BFC它就可以包裹住 p 以及 p 的 margin外邊距不會發生疊加outer 元素內部就會出現由 p 元素的 margin 頂出來的上下灰色背景。

建立 BFC 后外邊距不再疊加

一旦 BFC 建立它就會阻止它內部的元素逃離突破它。

一個 BFC 會停止去環繞浮動元素

你可能很熟悉 BFC 的這個特性我們在有浮動元素的列類型布局中常用到。如果一個元素創建了 BFC它就不會去環繞或者說包裝任何浮動元素。看下面這個示例

class 名為 float 的元素將會浮動在布局的左側class 名為 text 的 div 元素將會在它后面并環繞它。

文字環繞著浮動元素

我們可以通過給 text 元素建立 BFC 來阻擋這種環繞行為。

text 元素建立 BFC 后就不再環繞浮動元素了

該方法也是我們創建浮動布局的基本方式。還需注意的是浮動一個元素時也會給該元素創建 BFC也就是說此時 .float 與 .text 都是 BFC這也是無論右側高度低于還是高于左側兩者都不會互相圍繞的原因。

創建一個 BFC 的常用方式

除了使用 overflow 外 一些其他的 CSS 屬性也可以創建 BFC比如上面我們所見浮動一個元素也可以為該元素創建 BFC浮動元素會包裹它內部的所有元素。還有以下幾種方式可以創建 BFC

使用 position: absolute 或者 position fixed。

使用 display: inline-block、display: table-cell 或者 display: table-caption其中 table-cell 和 table-caption是表格相關 HTML 元素的對應默認 CSS 值所以當你創建表格每個表格單元都會自動創建 BFC。

另外當使用 multi-column layout 多列布局時使用 colum-span: all 也可以創建 BFC。Flex彈性 和 Grid網格 布局中的元素也會自動創建類似 BFC 的機制只是它們被稱為 Flex Formatting Context彈性格式上下文和 Grid Formatting Context(網格格式上下文)。這反映了它們所參與的布局類型。一個 Block Formatting Context塊級格式上下文表明他內部的元素參與了塊級布局一個 彈性格式上下文意味著它內部的元素參與了彈性布局。在實踐中這幾種布局的結果是相似的浮動元素會被包裹、外邊距不會疊加。

創建 BFC 的新方式

使用 overflow 或其他的方法創建 BFC 時會有兩個問題。第一個是這些方法本身是有自身的設計目的的所以在使用它們創建 BFC 時會可能產生副作用。例如使用 overflow 創建 BFC 后在某些情況下你可能會看到出現一個滾動條或者元素內容被削減。這是由于 overflow 屬性是設計被用來讓你告訴瀏覽器如何定義元素的溢出狀態的。瀏覽器執行了它最基本的定義。

另一個問題是即使在沒有出現副作用的情況下使用 overflow 也可能會使另一個開發人員感到困惑。他們可能會各種猜想這里為啥要把 overflow 的值設為 auto 或 scroll原開發人員做這個意義何在原開發人員是想讓這里出現滾動條嗎

最安全的做法應該是創建一個 BFC 時不會有任何副作用它內部的元素都安安全全的呆在這個小布局里這種方法不會引起任何意想不到的問題也可以讓開發者意圖清晰。CSS 工作組也十分認同這種想法所以他們定制了一個新的屬性值display: flow-root。

你可以使用 display: flow-root 安全的創建 BFC 來解決本文中提到的各種問題包括包裹浮動元素、阻止外邊距疊加、阻止環繞浮動元素。

caniuse 上 display: flow-root 各瀏覽器支持情況

瀏覽器對該屬性值的支持目前還是有限的如果你覺得這個屬性值很方便請投票去讓 Edge 也支持它。不過無論如何你現在應該已經理解了什么是 BFC以及如何使用 overflow 或其他方法來包裹浮動以及知道了 BFC 可以阻止元素去環繞浮動元素如果你想使用彈性或網格布局可以在一些不支持他們的瀏覽器中使用 BFC 的這些特性做降級處理。

理解瀏覽器如何布置網頁是非常基礎的。 雖然有時看起來無關緊要但是這些小知識可以加快創建和調試 CSS 布局所需的時間。

“CSS布局中BFC的詳細介紹”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！