BFC 簡述

BFC 是什麼

BFC 全稱爲塊級格式化上下文（Block Formatting Context），BFC 是 W3C CSS2.1 規範中的一個概念。
它決定了元素如何對其內容進行定位以及與其它元素的關係和相互做用，當涉及到可視化佈局的時候，Block Formatting Context 提供了一個環境，HTML 元素在這個環境中按照必定規則進行佈局。
一個環境中的元素不會影響其它環境中的佈局。好比浮動元素會造成 BFC，浮動元素內容的子元素主要受該浮動元素影響，兩個浮動元素之間是互不影響的。
能夠說 BFC 就是一個做用範圍，把它理解成一個獨立的容器，而且這個容器裏 box 的佈局與這個容器外的 box 絕不相干。

觸發 BFC 的條件

• 根元素或其它包含它的元素
• 浮動元素（元素的 float 不是 none）
• 絕對定位元素（元素具備 position: absolute|fixed）
• 內聯塊（元素具備 display: inline-block）
• 表格單元格（元素具備 display: table-cell，HTML 表格單元格默認屬性）
• 表格標題（元素具備 display: table-caption，HTML 表格標題默認屬性）
• 具備 overflow 且值不是 visible 的元素
• 彈性盒子（flex 或 inline-flex）

BFC 的約束規則

• 內部的盒子會在垂直方向一個接一個排列（能夠看做 BFC 中有一個常規流）
• 處於同一個 BFC 中的元素互相影響，可能會發生外邊距重疊。
• 每一個元素的 margin box 的左邊，與容器塊 border box 的左邊相接觸（對於從左往右格式化，不然相反），即便存在浮動也是如此。
• BFC 就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響外面的元素，反之亦然。
• 計算 BFC 的高度時，考慮 BFC 所包含的全部元素，連浮動元素也參與計算。
• 浮動盒區域不疊加到 BFC 上。

BFC 能夠解決的問題

垂直外邊距重疊問題

<style>
    .div1 {
        background-color: red;
        height: 50px;
        margin-bottom: 10px;
    }

    .div2 {
        background-color: blue;
        height: 50px;
        margin-top: 20px;
    }
</style>

<div class="div1"></div>
<div class="div2"></div>

此時，div1 和 div2 垂直間距爲較大的 20px，而非預期的 20px + 10px。

將其中一個 div 包裹在 BFC 中，便可解決此問題。

<style>
    .box {
        overflow: hidden;
    }

    .div1 {
        background-color: red;
        height: 50px;
        margin-bottom: 10px;
    }

    .div2 {
        background-color: blue;
        height: 50px;
        margin-top: 20px;
    }
</style>

<div class="box">
    <div class="div1"></div>
</div>
<div class="div2"></div>

清除浮動

<style>
    .box {
        border: 1px solid black;
    }

    .float {
        float: left;
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

<div class="box">
    <div class="float">1</div>
    <div class="float">2</div>
    <div class="float">3</div>
</div>

在瀏覽器中預覽，能夠清除看到子元素沒有將父元素撐開。此時讓父元素造成 BFC 便可清除浮動帶來的影響。

<style>
    .box {
        border: 1px solid black;
        overflow: hidden;
    }

    .float {
        float: left;
        width: 200px;
        height: 200px;
        background-color: red;
    }
</style>

<div class="box">
    <div class="float">1</div>
    <div class="float">2</div>
    <div class="float">3</div>
</div>