BFC究竟是什麼

BFC的定義

英文全稱block formatting contex，塊格式化上下文

網上好像沒有一個對BFC是什麼進行明確的定義，就算定義了也看不懂，只是知道如何建立一個BFC

BFC的定義就好比如是現實生活中去定義什麼是桌子同樣的難,你沒法用一句話去定義什麼是桌子，可是我看到了就知道那是桌子

相似的：

1.咱們不知道什麼是 BFC

2.可是你寫出樣式，我就知道這是否是 BFC

BFC 就是這樣的東西（堆疊上下文也是）

1.它沒有定義

2.它只有特性/功能

姑且本身給它下一個定義：BFC就是符合某一類特徵的對象

既然咱們沒法知道BFC的定義，咱們尚且落實到實際中去感覺BFC有哪些具體的特徵就能夠了，就比如咱們不知道如何去定義什麼是桌子，可是當咱們實際去接觸各類各樣的桌子的時候，腦海中已經對桌子的特徵偶遇了印象，下一次當咱們看到桌子的時候，知道它是桌子便可，反推，咱們沒法對BFC下定義，可是落實到實際中咱們知道："恩，這是BFC"，就比如是落到實際中見到桌子就能夠：」恩，這是桌子「同樣來的天然

BFC的功能

CSS規範中對 BFC 的描述

浮動，絕對定位元素，非塊盒的塊容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不爲'visible'的塊盒會爲它們的內容創建一個新的塊格式化上下文

在一個塊格式化上下文中，盒(就是兒子)在豎直方向一個接一個地放置，從包含塊（爸爸）的頂部開始。兩個兄弟盒之間的豎直距離由'margin'屬性決定。同一個塊格式化上下文（BFC）中的相鄰塊級盒之間的豎直margin會合並

在一個塊格式化上下文中，每一個盒的left外邊（left outer edge）挨着包含塊的left邊（對於從右向左的格式化，right邊挨着）。即便存在浮動（儘管一個盒的行盒可能會由於浮動收縮），這也成立。除非該盒創建了一個新的塊格式化上下文（這種狀況下，該盒自身可能會由於浮動變窄）

下面就根據CSS規範中的這4種狀況去實際感覺BFC，就比如是實際中去看去摸去用桌子同樣

功能1：讓父容器能夠包的住它裏面的浮動元素(這 TM 不是清除浮動，.clearfix 纔是清除浮動）

看一個例子：

實例

從實例中能夠看出：當兒子使用浮動後，它就會脫離它的父容器；爲何給父容器頁加上浮動以後，父容器就能夠包的住它裏面的子元素呢？

由於css標準說了，若是你是一個浮動元素，你就是一個BFC BFC有一個功能就是能夠包住它裏面的全部子元素，即便子元素是浮動的

再看一個例子：

當咱們將.baba這個父容器的float去掉，改成position：absolute的時候，父容器也能夠包的住它裏面浮動的元素

爲何呢？

由於css標準說了，若是你是一個絕對定位元素，你就是一個BFC BFC有一個功能就是能夠包住它裏面的全部子元素，即便子元素是浮動的

一樣的道理將父容器設置爲display:inline-block;、overflow:auto;

MDN 對 BFC 的描述

一個塊格式化上下文（block formatting context） 是Web頁面的可視化CSS渲染出的一部分。它是塊級盒佈局出現的區域，也是浮動層元素進行交互的區域。

一個塊格式化上下文由如下之一建立：

根元素或其它包含它的元素(例子中是div元素無法變成根元素) 浮動元素 (元素的 float不爲none的狀況) 絕對定位元素 (元素具備 position 爲 absolute 或 fixed) 內聯塊 (元素具備 display: inline-block) 表格單元格 (元素具備 display: table-cell，HTML表格單元格默認屬性) 表格標題 (元素具備 display: table-caption, HTML表格標題默認屬性) 具備overflow 且值不是 visible 的塊元素， display: flow-root column-span: all 應當老是會建立一個新的格式化上下文，即使具備 column-span: all 的元素並不被包裹在一個多列容器中。

一個塊格式化上下文包括建立它的元素內部全部內容，除了被包含於建立新的塊級格式化上下文的後代元素內的元素。

塊格式化上下文對於定位 (參見 float) 與清除浮動 (參見 clear) 很重要。定位和清除浮動的樣式規則只適用於處於同一塊格式化上下文內的元素。浮動不會影響其它塊格式化上下文中元素的佈局，而且清除浮動只能清除同一塊格式化上下文中在它前面的元素的浮動。

重點說一下：display: flow-root

可是以上的操做讓css不正交

也就是我改的東西並非我想要的東西，互相影響

好比例子中原本咱們只是想經過給.baba這個父容器加一個position:absolute;來觸發BFC，爲何你要改變個人高度？

再比如是咱們經過給父容器加上浮動來觸發BFC，可是浮動自己並非咱們想要的呀，咱們只是想要包住它浮動的兒子而已

其餘的也同樣，也就是說咱們在觸發BFC的時候卻添加了一個咱們不想要的屬性，能不能讓不要給咱們其餘的咱們不想要的東西就能觸發BFC?

css新特性提供了一個display: flow-root它的意思就是讓當前元素觸發BFC，是單純的觸發BFC，不添加額外的咱們不想要的東西,這樣css就改掉了它的臭毛病 ---- 不正交，也就是說不要讓我去改動浮動不要讓我去改動position也不要讓我去改overflow

BFC的附屬功能：同一個BFC中的相子元素之間的豎直margin會合並

實例2

例子中原本2個.erzi的div都設置了margin爲10px可是因爲他們處在同一個BFC中豎直的margin發生了合併，所以他們的豎直margin由原本應該爲20px變爲了10px

下面在理解一下MDN上的一句話：一個塊格式化上下文包括建立它的元素內部全部內容（它的意思就是爸爸會把它裏面全部的內容都包住無論兒子是否是浮動元素），除了被包含於建立新的塊級格式化上下文的後代元素內的元素（用例子去理解一下這句話）。

實例3

爲何這裏的兒子即便加了margin-top: 100px;也能被爸爸包住，可是孫子加了margin-top就包不住了呢？

再回過頭來理解一下：一個塊格式化上下文包括建立它的元素內部全部內容,除了被包含於建立新的塊級格式化上下文的後代元素內的元素

由於爸爸是一個BFC，兒子用了浮動因此兒子是一個新的BFC，孫子是在兒子裏面的，因爲兒子使用了BFC，因此孫子就歸兒子管了

爲何兒子沒有包住孫子？

爲了演示爸爸不能包住孫子，把兒子的高度去掉就能夠包住了

功能2：兄弟之間劃清界限

實例

在沒有給哥哥加上浮動的時候，2個div就是依次擺放

一旦給哥哥加上浮動以後，哥哥就會浮動起來覆蓋在弟弟上面，同時弟弟的內容原本應該是和哥哥重疊的可是也被哥哥擠出來了

那麼咱們有沒有辦法讓哥哥和弟弟的界限分明一點，不要重疊在一塊兒？

能夠！使用BFC

[實例3]9https://jsbin.com/lezifidevo/edit?html,css,output)

這樣咱們就觸發了綠色div的BFC，這裏BFC的功能就是：

對比沒有給綠色div加BFC以前，能夠發現，綠色區域的內部老是個紅色區域重疊的部分有一種不清不楚的關係，那麼綠色div爲了和紅色div劃清界限就使用overflow: auto;出發了綠色div的BFC，BFC就會把它內部的內容拉回來，有一種遠離紅色div的趨勢，想要撇清關係的意思也有一種和紅色div鬧矛盾的意思，好好去意會裏面的意思

這裏用一個div用浮動，另一個div用overflow：auto；就能夠作一個左右佈局

一個頭疼的問題又來了：如何給2個div加margin呢？

當咱們給綠色div加上margin-left等於50的的時候其實已經加上了，爲何沒有效果呢？

由於被紅色浮動的div遮住了

只有當咱們給綠色div的margin-left足夠大的時候（大到超太重疊的部分）纔出現margin的效果

還有一種方法：咱們能夠把margin-left加在浮動的元素上

爲何呢？

咱們能夠從BFC去理解這個現象，因爲綠色div加了BFC那麼它就有遠離它相鄰元素的趨勢

模擬一下現實場景：

紅色div和綠色div發生了矛盾：

紅色div：個人區域是個人寬度和margin-right

綠色div： 好吧！我要和你劃清界限，我不和你打交道

注意:

儘可能使用display: flow-root;去觸發BFC，這樣才能避免咱們不想要的屬性

總結：BFC的2個功能： 1.讓內部的元素被包裹起來無論內部元素是否浮動 2.讓倆個相鄰元素之間界限分明

幾個小的tips

1.BFC影響的一個元素的寬高，以前只包含文檔流元素，如今還包含了浮動元素

2.BFC不會使文檔流發生變化（該是浮動仍是浮動該是文檔流仍是文檔流）

3.只有SB才用BFC去清除浮動，能用.clearfix去清除浮動，就絕對不要用BFC的功能1，也就是讓內部的元素被包裹起來

用清除浮動代替BFC

咱們想要清除浮動的時候就用清除浮動（給父容器加上.clearfix）千萬不要用BFC，不然會派生出更多的bug，除非display:flow-root能被全部瀏覽器支持 上面觸發BFC的例子基本都有反作用（除了display:flow-root;）,可是經過給父元素加上清除浮動也能夠達到一樣的效果，清除浮動的代碼

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}
複製代碼

4.BFC的功能2，讓倆個相鄰元素之間界限分明，也能夠用其餘的方案代替

用flex佈局代替BFC

例如前面的例子中讓紅色div浮動，綠色div使用overflow：auto；觸發BFC以實現左邊固定右邊自適應的左右佈局一樣可使用flex去實現

5.還有一種狀況會用到BFC

實例

也就是說爸爸被兒子頂出來了，爲何會這樣？由於爸爸不是一個BFC，因此兒子的margin-top能夠伸到爸爸的外面去了

解決的辦法就是讓爸爸變成一個BFC：

實例

但是這裏使用overflow: hidden;去觸發BFC真的好嗎？一樣是那個問題：雖然觸發了BFC可是搞了一個我並不想要的overflow: hidden;買一送一？？（固然若是瀏覽器對支持display:flow-root很是友好是能夠的）

咱們一樣有一個替代BFC的方案:b給爸爸加一個border-top

實例

爲何爸爸加了border-top它的高度就變高了，由於這樣，兒子的margint-top就無法穿透藍色的border出去

因此仍是能夠不用BFC

那麼至此的結論就是：

沒有任何一種狀況須要使用到BFC，BFC已是歷史的產物，之後就不要再討論什麼BFC了，整這些玄乎的東西，沒有什麼實際的意義

關於面試

面試的時候該如何答？

====> 只須要記住3個例子和一個翻譯

英文全稱block formatting contex，塊格式化上下文

爸爸包的住浮動的兒子

和浮動元素兄弟之間劃清界限

兒子的margin-top也出不去

注意：

1.千萬別解釋什麼是 BFC，一解釋就錯

2.用上面的例子回答什麼是 BFC

i.若是div被觸發BFC素，好像這個div被升級了，不光能夠將清除它裏面的浮動就算是margin-top也出不去

ii.左邊一個浮動的div，右邊一個div,若是右邊的這個元素不用BFC就會和左邊的div發生重疊，關係不清不楚（觸發BFC能夠是display: flow-root;也能夠是overflow:hidden;或者overflow:auto;只要不是overflow'爲'visible)

iii. 子元素的margin-top也出不去