簡單理解css的bfc模式-tft每日頭條

一、什麼是BFC

首先引用一下WC3對BFC的專業解釋

BFC（Block Formatting Context）：翻譯成中文叫做塊級格式化上下文，它決定了元素如何對其内容進行定位，以及與其它元素的關系和相互作用，當涉及到可視化布局時，其提供了一個環境，元素在這個環境中按照一定的規則進行布局排列

換句話說，BFC就是為元素提供一個獨立的容器，在該容器裡按照一定的規則進行布局排列，該容器内的元素不會影響外部的元素，同理，外部的元素也不會影響内部的元素

二、如何觸發BFC

先來了解一下有哪些條件可以觸發BFC：

float 不為 none
position 為 absolute 或 fixed
overflow 不為 visible
display 為 inline-block 或 table 或 flow-root

後續的案例中，但凡遇到需要觸發BFC的，都可以按照這四個條件來使用

三、BFC的相關案例

官方的解釋非常的難以理解，那麼我們就用幾個例子來詳細了解BFC的使用

（1）清除浮動

首先來看一個例子

簡單理解css的bfc模式（你知道CSS中的BFC是什麼嗎）1

該html文檔在浏覽器中的樣式如下圖所示

簡單理解css的bfc模式（你知道CSS中的BFC是什麼嗎）2

很明顯，這是一個子元素浮動無法撐開父元素的例子

産生這種情況的原因很簡單，有以下兩點：

父元素沒有設置 height
子元素設置了 float 浮動，脫離了文檔流

因子元素脫離了文檔流，父元素無法統計到子元素的大小，因此子元素無法将父元素撐開，所以我們就要将浮動清除

那麼我們平時是如何清除浮動的呢？最常見的可能就是給父元素添加樣式 overflow: hidden了，其實這種方法就觸發了BFC，在父元素内部形成了一個獨立的環境，按照BFC的布局規則，該容器内的元素都會被統計到，因此浮動就被清除了

清除浮動後的效果如下圖所示

簡單理解css的bfc模式（你知道CSS中的BFC是什麼嗎）3

其實通過我們上述說到的觸發BFC的條件都可以實現上述效果，這裡就不做過多的展示了

既然講到了清除浮動，我們就來看一下除了上述說到的方法，還會用到什麼辦法呢？

在最後一個子元素後面添加一個空元素，并給予樣式 clear: both
給父元素設置一定的高度

（2）margin-top塌陷

另一個例子就是margin-top塌陷，如圖

簡單理解css的bfc模式（你知道CSS中的BFC是什麼嗎）4

當前子元素在父元素框内，并且上面緊貼父元素上邊緣，此時我們想讓子元素的上邊緣與父元素的上邊緣拉開一段距離，實現如下圖所示的效果

簡單理解css的bfc模式（你知道CSS中的BFC是什麼嗎）5

因此我們第一個想到的就是給子元素添加 margin-top，可結果卻不如人意，效果如下圖所示

簡單理解css的bfc模式（你知道CSS中的BFC是什麼嗎）6

實際效果就是，我們給子元素添加了 margin-top，但卻是父元素整體與上一個元素拉開了距離，這就是我們常見的 margin-top塌陷 的問題

很明顯，對子元素進行布局時影響到了其它元素的布局，因此我們可以通過給父元素添加一定的樣式來觸發BFC，使其内部形成一個獨立的環境，這樣就不會影響到其它元素的布局了

這裡再做一個補充，針對 margin-top塌陷，我們還可以對父元素設置一個大小不為0的邊框 border，這樣也能解決問題

（3）垂直方向的margin重疊

先來看一段代碼

簡單理解css的bfc模式（你知道CSS中的BFC是什麼嗎）7

效果如圖所示

簡單理解css的bfc模式（你知道CSS中的BFC是什麼嗎）8

根據代碼，按道理來說子元素1與子元素2之間應該相隔 20 50 = 70px，但實際卻隻有 50px；同理，子元素2與子元素3之間應該相隔 70 50 = 120px，但實際卻隻有 70px

這是因為在垂直方向上，相鄰兩個元素若都設置了 margin 值，則按照較大的那個值來布局，這就是典型的垂直方向上的margin重疊問題

若此時為了避免margin重疊，我們可以給每一個子元素的外部添加一個父元素，并對父元素設置樣式來觸發BFC，那麼就不會有上述的問題了

具體的代碼：

簡單理解css的bfc模式（你知道CSS中的BFC是什麼嗎）9

效果如下圖所示：

簡單理解css的bfc模式（你知道CSS中的BFC是什麼嗎）10

補充： 該案例中，我們通過給每個子元素套上了個父元素，并且都觸發了BFC，從而實現了避免 margin 重疊，即我們創建了多個BFC才實現這樣的效果。但是如果在一個BFC環境中，仍有多個子元素，那麼這些子元素垂直方向的 margin 仍會出現重疊

（4）自适應布局

相比大家都有做過文字繞圖這樣的效果，其實現原理就非常的簡單，隻需一個 float 就可實現

簡單理解css的bfc模式（你知道CSS中的BFC是什麼嗎）11

效果如下圖所示

簡單理解css的bfc模式（你知道CSS中的BFC是什麼嗎）12

按道理來說，浮動的元素脫離了正常的文檔流，應該會覆蓋住别的元素的内容，但為什麼這裡實現了文字繞圖的效果呢？

其實CSS最初設計浮動就是為了實現文字繞圖的效果，雖然浮動會覆蓋别的元素，但不會覆蓋住文字

此時我們為了不讓浮動的元素覆蓋住别的元素，我們可以觸發别的元素的BFC環境，因此可以給文本元素添加 overflow: hidden 樣式，效果如下圖所示

簡單理解css的bfc模式（你知道CSS中的BFC是什麼嗎）13

看到這裡，不禁想起這幾年非常流行的頁面布局，那就是兩欄布局，如下圖所示

簡單理解css的bfc模式（你知道CSS中的BFC是什麼嗎）14

一般像這樣的布局，都是左側寬度固定了，右側的寬度是自适應的

因此我們就可以通過剛才避免文字繞圖的方式來實現這種布局

代碼如下：

簡單理解css的bfc模式（你知道CSS中的BFC是什麼嗎）15

效果如圖所示

簡單理解css的bfc模式（你知道CSS中的BFC是什麼嗎）16

四、結束語

官方對于BFC的講解，我感覺是有點難以理解，因此我在本文中也沒有将BFC環境中的布局規則列舉出來，但其實BFC的布局規則大緻可以理解為與正常的布局規則一樣，隻不過有些特殊的規則我在案例中也特地強調出來了，希望大家可以把每個案例好好看一看，這樣應該能對BFC有個大緻的了解了。

原作者姓名：Lpyexplore原出處：CSDN原文鍊接：學習過CSS，那你知道BFC是什麼嗎？_Lpyexplore的博客-CSDN博客_bfc是什麼