雖然可能你沒聽過BFC是什么，但是你一定用過，其是一種在CSS中存在的技術，你可能只是一直不知道有這樣一個專業名詞，本文就來介紹一下到底什么是BFC。

一起來理解BFC的作用！

一、什么是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）清除浮動

首先來看一個例子

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

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

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

父元素沒有設置 height

子元素設置了 float 浮動，脫離了文檔流

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

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

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

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

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

在最后一個子元素后面添加一個空元素，并給予樣式 clear: both

給父元素設置一定的高度

（2）margin-top塌陷

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

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

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

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

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

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

（3）垂直方向的margin重疊

先來看一段代碼

效果如圖所示

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

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

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

具體的代碼：

效果如下圖所示：

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

（4）自適應布局

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

效果如下圖所示

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

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

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

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

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

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

代碼如下：

效果如圖所示

四、結束語

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

原作者：Lpyexplore

原出處：CSDN

原文鏈接：學習過CSS，那你知道BFC是什么嗎？_Lpyexplore的博客-CSDN博客_bfc是什么

總結

以上是生活随笔為你收集整理的css 文字重叠_学习过CSS，那你知道BFC是什么吗？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。