BFC是什么？10 分鐘講透BFC 原理

1. 引言

在前端的布局手段中，一直有這么一個知識點，很多前端開發(fā)者都知道有它的存在，但是很多人也僅僅是知道它的存在而已，對它的作用也只是將將說得出來，可是卻沒辦法說得非常的清晰。這個知識點，就是BFC。想要了解BFC的規(guī)則，前提必須是熟悉前端網(wǎng)頁的多種布局手段，例如盒的顯示模式display，三種布局手段標(biāo)準(zhǔn)流(normal)、浮動流(float)、定位流(position)等。你只有熟練掌握了這些布局手段之后，才能很好的理解BFC。今天這篇文章，來大家解析一下BFC，希望對各位新老朋友有所幫助。

2. 定義

BFC - Block Formatting Context 塊級格式化上下文 BFC的定義，在官方文檔到中，是這么介紹BFC的。

A block formatting context contains everything inside of the element creating it that is not also inside a descendant element that creates a new block formatting context.

強行翻譯一下吧，簡單來說，這句話的意思就是：

一個BFC區(qū)域包含創(chuàng)建該上下文元素的所有子元素，但是不包括創(chuàng)建了新的BFC的子元素的內(nèi)部元素

很顯然，哪怕強行翻譯了，大部分人依舊是看不懂這句話的。看都看不懂，那自然就沒什么能把它說明白。talk is cheap, show me the code.看不懂意思，我用代碼來給你演示。

<div class="box1" id="HM_bfc1">
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box4"></div>
    <div class="box5" id="HM_bfc2">
        <div class="box6"></div>
        <div class="box7"></div>
        <div class="box8"></div>
    </div>
</div>

用這段代碼來解釋上面那段BFC定義的話，就應(yīng)該是這個意思：#HM_bfc1是一塊BFC區(qū)域，這塊區(qū)域包含了box2、box3、box4、box5，也就是所有#HM_bfc1的子元素。同時#HM_bfc2也創(chuàng)造了一塊BFC區(qū)域，包含了box6，box7，box8。注意，第一個box1的BFC，只包括box1的子元素box2345，不包括box678。#HM_bfc2這個BFC同樣也僅僅是包括自己的子元素box678。

劃重點

每一個BFC區(qū)域只包括其子元素，不包括其子元素的子元素。(這1點比較容易理解)

每一個BFC區(qū)域都是獨立隔絕的,互不影響!(這點不太好理解，但是后續(xù)會使用代碼驗證)

看完上面的描述，很多朋友依舊不懂，把第2節(jié)用心的再讀一遍，相信你會有新的收獲。然后往下繼續(xù)閱讀，你會豁然開朗。

3. 觸發(fā)BFC

并不是任意一個元素都可以被當(dāng)做BFC，只有當(dāng)這個元素滿足以下任意一個條件的時候，這個元素才會被當(dāng)做一個BFC。

觸發(fā)BFC的條件

·body根元素

·設(shè)置浮動，不包括none

·設(shè)置定位，absoulte或者fixed

·行內(nèi)塊顯示模式，inline-block

·設(shè)置overflow，即hidden，auto，scroll

·表格單元格，table-cell

·彈性布局，flex

上代碼說明

首先, body元素是1個BFC，因為它滿足我們的第1個條件(body根元素)，這個BFC區(qū)域包含子元素hm1234，但是不包括兩個p標(biāo)簽，需要注意的是，hm3不是一個BFC區(qū)域，因為他不滿足上面任意1個條件。如果我們希望hm3也是1個BFC區(qū)域，只要讓hm3滿足上面任意一個條件即可。

這個時候，hm3元素被設(shè)置為了overflow為hidden，滿足上面第5個條件，所以此時，hm3就成為了一個BFC區(qū)域，這個BFC區(qū)域包含其所有子元素 – 兩個p標(biāo)簽。

劃重點:

并不是所有的元素都是BFC, 只有滿足了上面的任意1個條件之后，這個元素才成為1個BFC。

一個BFC區(qū)域，只包含其所有子元素，不包含子元素的子元素。

4. 利用BFC解決問題

在你明白了解BFC的觸發(fā)規(guī)則之后，那么就需要利用BFC的特點來解決我們在布局中遇到的一些問題了，還記得我們之前說過，BFC有一個特點是：每一個BFC區(qū)域都是相互獨立，互不影響的。

4.1 解決外邊距的塌陷問題(垂直塌陷)

開發(fā)中，前端的布局手段，離不開外邊距margin，那么，也會遇到一些問題，例如外邊距的垂直塌陷問題。

通過以上的實例，我們會發(fā)現(xiàn)，代碼給兩個div盒子，都添加了四個方向的margin，講道理，學(xué)過數(shù)學(xué)的都知道，100+100=200.可是，盒子之間的距離，現(xiàn)在卻之后100px。這就是很典型的margin的塌陷，兩段margin重疊到了一塊，互相影響。那么，如何利用BFC，讓這個問題得到解決呢?；貞浵?，上文說過，BFC，就是一個與世隔絕的獨立區(qū)域，不會互相影響，那么，我們可以將這兩個盒子，放到兩個BFC區(qū)域中，即可解決這個問題。

4.2 利用BFC解決包含塌陷

當(dāng)父子關(guān)系的盒子，給子元素添加margin-top，有可能會把父元素一起帶跑。

原本，正確的顯示方式，應(yīng)該是粉色盒子與紅色盒子的頂部距離為50px，但是由于margin的塌陷問題，導(dǎo)致盒子內(nèi)部的布局影響到了外部。這個時候，就可以觸發(fā)BFC，將父盒子變成一個獨立的區(qū)域，這樣在BFC區(qū)域內(nèi)部的任何操作，都不會影響到外部。

4.3 當(dāng)浮動產(chǎn)生影響的時候，可以利用BFC來清除浮動的影響

以上代碼表示，一個沒有設(shè)置高度的父盒子，包含著七個子元素。如果此時，所有的子元素都浮動的話。

當(dāng)所有的子元素都浮動了，這個時候，父盒子失去了原有的高度，這就是浮動的影響。這個時候，同樣也可用BFC的機制，來清除浮動帶來的影響。使用BFC，將所有的浮動元素包裹起來。

4.4 BFC可以阻止標(biāo)準(zhǔn)流元素被浮動元素覆蓋

以上情況，紅色盒子浮動，藍色盒子時標(biāo)準(zhǔn)流，默認(rèn)情況下，浮動元素覆蓋了標(biāo)準(zhǔn)流元素。但是，如果將藍色盒子的BFC觸發(fā)，那么情況將有所變化。

當(dāng)藍色盒子觸發(fā)了BFC之后，浮動元素再也不能覆蓋它了，而且還能利用這個特性，來實現(xiàn)藍色盒子寬度根據(jù)紅色盒子的寬度來做自動適應(yīng)

5.總結(jié)

一個BFC區(qū)域只包含其子元素，不包括其子元素的子元素。

并不是所有的元素都能成為一塊BFC區(qū)域，只有當(dāng)這個元素滿足條件的時候才會成為一塊BFC區(qū)域。

不同的BFC區(qū)域之間是相互獨立的，互不影響的。利用這個特性我們可以讓不同BFC區(qū)域之間的布局不產(chǎn)生影響。


猜你喜歡：

v-show和v-if的區(qū)別詳細介紹

BFC是什么?

html中figcaption標(biāo)簽的作用

前端開發(fā)培訓(xùn)課程