本文轉載自https://www.cnblogs.com/chen-cong/p/7862832.html

一、何為BFC

BFC（Block Formatting Context）格式化上下文，是Web頁面中盒模型布局的CSS渲染模式，指一個獨立的渲染區域或者說是一個隔離的獨立容器。

二、形成BFC的條件

1. 浮動元素，float 除 none 以外的值；
2. 定位元素，position（absolute，fixed）；
3. display 為以下其中之一的值 inline-block，table-cell，table-caption；
4. overflow 除了 visible 以外的值（hidden，auto，scroll）；

三、BFC的特性

1. 內部的Box會在垂直方向上一個接一個的放置。
2. 垂直方向上的距離由margin決定
3. bfc的區域不會與float的元素區域重疊。
4. 計算bfc的高度時，浮動元素也參與計算
5. bfc就是頁面上的一個獨立容器，容器里面的子元素不會影響外面元素。

看到這里是不是有丈二和尚摸不著頭腦的感覺，下面用案例來幫助理解認識：

四、實踐是檢驗真理的唯一標準

（1）BFC中的盒子對齊

特性的第一條是：內部的Box會在垂直方向上一個接一個的放置。

浮動的元素也是這樣，box3浮動，他依然接著上一個盒子垂直排列。并且所有的盒子都左對齊。

div {
            height: 20px;
        }
        
        .container {
            position: absolute;  /* 創建一個BFC環境*/
            height: auto;
            background-color: #eee;
        }
        
        .box1 {
            width: 400px;
            background-color: red;
        }
        
        .box2 {
            width: 300px;
            background-color: green;
        }
        
        .box3 {
            width: 100px;
            background-color: yellow;
            float: left;
        }
        
        .box4 {
            width: 200px;
            height: 30px;
            background-color: purple;
        }

<div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>

（2）單個BFC里面元素會發生垂直外邊距折疊

特性的第二條：垂直方向上的距離由margin決定

在常規文檔流中，兩個兄弟盒子之間的垂直距離是由他們的外邊距所決定的，但不是他們的兩個外邊距之和，而是以較大的為準。在單個BFC中也存在這種情況。
示例：

.container {
            overflow: hidden;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        .box1 {
            height: 20px;
            margin: 10px 0;
            background-color: green;
        }
        
        .box2 {
            height: 20px;
            margin: 20px 0;
            background-color: green;
        }

  <div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>

代碼結果：

這里我們可以看到，第一個子盒子有上邊距；兩個子盒子的垂直距離為20px而不是30px，因為垂直外邊距會折疊，間距以較大的為準。

那么有沒有方法讓垂直外邊距不折疊呢？答案是：有。特性的第5條就說了：BFC就是頁面上的一個獨立容器，容器里面的子元素不會影響外面元素，同樣外面的元素不會影響到BFC內的元素。所以就讓box1或box2再處于另一個BFC中就行了。

.container {
        overflow: hidden;
        width: 100px;
        height: 100px;
        background-color: red;
    }
    
    .wrapper {
        overflow: hidden;
    }
    
    .box1 {
        height: 20px;
        margin: 10px 0;
        background-color: green;
    }
    
    .box2 {
        height: 20px;
        margin: 20px 0;
        background-color: green;
    }

<div class="container">
        <div class="wrapper">
            <div class="box1"></div>
        </div>
        <div class="box2"></div>
    </div>

運行結果：

這時我們發現垂直外邊距不會發生折疊，而是它們的兩個外邊距之和。

（3）不被浮動元素覆蓋

以常見的兩欄布局為例。
左邊固定寬度，右邊不設寬，因此右邊的寬度自適應，隨瀏覽器窗口大小的變化而變化。

.column1 {
            float: left;
            width: 200px;
            height: 300px;
            margin-right: 10px;
            background-color: red;
        }
        
        .column2 {
            overflow: hidden;/*創建bfc */
            height: 300px;
            background-color: purple;
        }

 <div class="column1"></div>
 <div class="column2"></div>

運行結果：

也可以用來防止字體環繞：
眾所周知，浮動的盒子會遮蓋下面的盒子，但是下面盒子里的文字是不會被遮蓋的，文字反而還會環繞浮動的盒子。這也是一個比較有趣的特性。

（1）環繞：

.left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        
        p {
            background-color: green;
            /* overflow: hidden; */
        }

（2）利用bfc防止環繞

.left {
            float: left;
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        
        p {
            background-color: green;
            overflow: hidden;
        }

  <div class="left"></div>
    <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
       你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
       你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    </p>

運行結果：
（1）

（2）