CSS：BFC 最熟悉的陌生人

時間 2019-11-09

標籤 css bfc 熟悉陌生人欄目 CSS 简体版

原文原文鏈接

BFC，你也許聽過這個詞，可是你可能不是頗有底氣地解釋清楚。
寫樣式的時候，每每加了一個樣式或者改了一個屬性，就能達到你指望的效果，一切都是如此地神奇。
BFC就是神奇之一，它也是最熟悉的陌生人，由於你一不當心就會觸發它然而你並無意識到它正在神奇地發揮做用。前端

1、初探BFC

咱們先看看CSS佈局的基本單位：佈局

block-level box: display 屬性爲 block, list-item, table 的元素，會生成 block-level box，而且參與 block formatting context
inline-level box: display 屬性爲 inline, inline-block, inline-table 的元素，會生成 inline-level box，而且參與 inline formatting context

那這個formatting context又是什麼玩意兒？flex

它是W3C CSS2.1規範中的一個概念。它是頁面中的一塊渲染區域，而且有一套渲染規則，它決定了其子元素將如何定位，以及和其餘元素的關係和相互做用。也就是說咱們平時在佈局的時候，它默默地提供了一個環境，使得HTML元素在這個環境中按照必定規則進行佈局。spa

最多見的formatting context有Block Formatting Context(BFC)和Inline Formatting Context(IFC)，CSS3中還增長了GridLayout Formatting Context(GFC)和Flex Formatting Context(FFC)，這裏就不深刻研究了。3d

BFC定義：它是一個獨立的渲染區域，只有block-level box參與，其中的元素按照規定的渲染規則進行佈局，而且這個區域與外部絕不相干。code

2、BFC的佈局規則與觸發規則

剛纔咱們說到BFC中的元素有一套規定的佈局規則：orm

內部的元素會在垂直方向一個接一個地放置
元素垂直方向的距離由margin決定，屬於同一個BFC的兩個相鄰元素的margin會發生重疊
每一個元素的左外邊距與包含塊的左邊界相接觸(對於從左往右，不然相反)，即便存在浮動也是如此
BFC的區域不會與float元素重疊
計算BFC的高度時，浮動元素也參與計算
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之也如此

剛纔咱們又提到BFC是一塊渲染區域，那這塊渲染區域到底在哪，它又是有多大，這些由生成BFC的元素來決定，CSS2.1中規定知足下列CSS聲明的元素便會生成BFC（觸發規則）：blog

根元素
float的值不爲none
overflow的值不爲visible
position的值爲absolute或fixed
display的值爲inline-block, table-cell, table-caption, flex, inline-flex
注：display: table也認爲能夠生成BFC，主要緣由是table會默認生成一個匿名的table-cell，正是這個匿名的table-cell生成了BFC

上面這些CSS聲明的元素生成了BFC，而它們自己並非BFC，這一點須要區分。圖片

3、BFC的應用

說了這麼多有用沒用的，咱們平時佈局的時候到底怎麼應用呢：it

1.防止垂直margin重疊

有點佈局經驗的朋友都知道margin collapse，也就是相鄰的垂直元素同時設置了margin後，實際margin值會塌陷到其中較大的那個值。其根本原理就是它們處於同一個BFC，符合「屬於同一個BFC的兩個相鄰元素的margin會發生重疊」的規則。

咱們能夠在其中一個元素外面包裹一層容器，並觸發該容器生成一個BFC。那麼兩個元素便屬於不一樣的BFC，就不會發生margin重疊了：

<style>
    .wrap{
        overflow: hidden;
    }
    p{
        width: 200px;
        line-height: 100px;
        margin: 100px;
        background: #000;
        color: #fff;
        text-align: center;
    }
</style>

<body>
    <p>我屬於一個BFC</p>
    <div class="wrap">
        <p>我屬於另外一個BFC</p>
    </div>
</body>

若是是個人話會直接設置200px，或者只設置其中一個元素的margin（懶能夠偷，但原理需知道）

2.防止浮動子元素高度塌陷

<style>
    .parent{
        width: 300px;
        border: 3px solid #000;
        overflow: hidden;
    }
    .child{
        float: left;
        width: 100px;
        height: 100px;
        border: 3px solid #f00;
        color: #f00;
    }
</style>

<body>
    <div class="parent">
        <div class="child">float: left</div>
        <div class="child">float: left</div>
    </div>
</body>

若是咱們將.parent元素的overflow: hidden去掉，那麼.parent元素就獲取不到浮動元素的高度了。可是加上overflow屬性後觸發了BFC，計算BFC的高度時，浮動元素也參與了計算。

3.防止文字（或其餘元素）環繞

<style>
    .parent{
        width: 300px;
        border: 3px solid #000;
    }
    .child{
        float: left;
        width: 100px;
        height: 100px;
        border: 3px solid #f00;
        color: #f00;
    }
    .text{
        overflow: hidden;
    }
</style>

<body>
    <div class="parent">
        <div class="child">float: left</div>
        <div class="text">我只是文字但我不會環繞我只是文字但我不會環繞我只是文字但我不會環繞我只是文字但我不會環繞我只是文字但我不會環繞我只是文字但我不會環繞我只是文字但我不會環繞我只是文字但我不會環繞我只是文字但我不會環繞我只是文字但我不會環繞</div>
    </div>
</body>

正常狀況下，若是一個塊級元素設置成了float，那麼他的兄弟元素會環繞其佈局。這裏咱們給.text加上overflow，文字所在的區域就產生了BFC，元素的左邊老是觸碰到容器的左邊，即便存在浮動也是如此。

這裏舉例了幾個比較經典的應用，咱們在之後的佈局中也能夠慢慢探索其中的奧祕之處，作一個能寫一手好樣式還能懂原理的前端er。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。