BFC 解說，也許是目前爲止最接地氣的一篇

時間 2020-04-14

標籤 bfc 解說也許目前爲止接地一篇简体版

原文原文鏈接

前言

爲何要寫這篇文章，由於網上一搜你會發現，除了雷同，更多的是乏味，難懂，概念滿天飛。我不否定這樣寫的好處，但也請容許我爲 BFC 添鹽加醋，即便依舊乏味，好歹也算一出。css

這裏分紅三分部來說解 BFC 。BFC 不是什麼遙遠的東西，只要你作前端，它一直都在你身旁，只是不少時候，你沒注意到，或者不知道這就是跟 BFC 有關。有些東西就是這樣，不知不覺地就經歷了，但當你反應過來其實也不晚，只是會感嘆一句：「原來如此」。html

BFC 是什麼

BFC 是一個獨立的渲染區域。前端

什麼叫獨立？面試

獨立就是不受外界影響，也不會影響外界，與世隔絕的那種。就像咱們是一個獨立的人同樣，能夠不受外界的影響。但.......，我怎麼感受這樣比喻很牽強？？？嗯，你懂的！反正 BFC 所說的獨立比咱們人類中的所謂獨立要純粹得多。ide

渲染區域又是什麼？佈局

就是渲染的區域啊，我還能說啥呢！嗯，說點吧！flex

渲染就是你隔着屏幕看到的東西，區域就是指定的一塊，無論大或小，說白了就是元素包裹的區域，隨便打開一個網頁，都不會讓你失望。spa

而這個所謂的區域又有本身的一套渲染規則，在它裏面的元素只能乖乖地任由它按這個渲染規則擺佈，沒有一點商量的餘地。code

BFC 有什麼用

有了 BFC 咱們就能夠利用它來解決一些問題。好比：浮動致使的父元素高度坍塌，甚至咱們還能夠利用 BFC 的特性來實現多欄自適應佈局。cdn

浮動致使的父元素高度坍塌利用了【計算BFC的高度時，浮動元素也參與計算】這一特性實現的。
實現多欄自適應佈局是利用了【BFC的區域不會與float box重疊】這一特性實現的。
外邊距重疊（取最大的外邊距值），可利用【BFC 是一個獨立的區域】這一特性來解決。

下面是幾個例子，因爲 overflow: hidden 也是會觸發生成 BFC 的方法之一，因此下面的例子都以它做爲示例，更多可建立 BFC 的方法或者條件會在最後的 BFC 建立方法一小節中一一列出，如今咱們先看例子：

高度坍塌

<!DOCTYPE html>
<html lang="en">
<style> .box{ background-color: antiquewhite; } p { float: left; } .bfc { overflow: hidden; } </style>
<body>
    <div class="box bfc">
        <p>第一個</p>
        <p>第二個</p>
    </div>
</body>
</html>
複製代碼

浮動咱們平時都用得也多，而且解決因浮動所帶來的問題（高度坍塌）咱們也是會不知爲何很天然的加上 overflow: hidden 來解決。如今你可知道爲何了吧！這個就是我所說的不經意中的其實一個。

兩欄自適應

<!DOCTYPE html>
<html lang="en">
    <style> aside { background-color: antiquewhite; width:200px; height: 300px; } .left{ float: left; } main{ height: 300px; background-color: darkgrey; } .bfc { overflow: hidden; } </style>
    <body>
        <div class="box">
            <aside class="left">左側</aside>
            <main class="bfc">主區域</main>
        </div>
    </body>
</html>
複製代碼

這種兩欄自適應的場景實現太常見了，當心面試的時候被問題。

多欄自適應

<!DOCTYPE html>
<html lang="en">
    <style> aside { background-color: antiquewhite; width:200px; height: 300px; } .left{ float: left; } .right{ float: right; } main{ height: 300px; background-color: darkgrey; } .bfc { overflow: hidden; } </style>
    <body>
        <div class="box">
            <aside class="left">左側</aside>
            <aside class="right">右側</aside>
            <main class="bfc">主區域</main>
        </div>
    </body>
</html>
複製代碼

注意：上面的 main 元素要放到最後面，否則就不會出現三足鼎立的局面。

外邊距重疊

很常見，好比不加任何修飾（樣式）的相鄰的 p 標籤，或者 ul 內相鄰的 li 標籤（若是有外邊距），不單單是相鄰的標籤，父子標籤也會出現外邊距重疊。

相鄰外邊距重疊：

<!DOCTYPE html>
<html lang="en">
<style> p { margin: 28px 0; } .bfc { overflow: hidden; } </style>

<body>
    <p>第一個</p>
    <div class="bfc">
        <p>第二個</p>
    </div>
</body>
</html>
複製代碼

這裏就使用了【BFC 是一個獨立的區域】這一特性。

若是你沒遇到過所謂的相鄰邊距重疊，那直接把類名 bfc 的那個 div 刪除就能夠看到效果了（下同）。

父子邊距重疊

<!DOCTYPE html>
<html lang="en">
    <style> .box{ background-color: antiquewhite; } main{ margin-top: 28px; height: 300px; background-color: darkgrey; } .bfc { overflow: hidden; } </style>
    <body>
        <div class="box">
            <div class="bfc">
                <main >主區域</main>
            </div>
        </div>
    </body>
</html>
複製代碼