BFC佈局

1、觸發該模式：

一、根元素

二、float屬性不爲none

三、position爲absolute或fixed

四、display爲inline-block, table-cell, table-caption, flex, inline-flex

五、overflow不爲visible

2、規則

一、內部的Box會在垂直方向，一個接一個地放置。

二、Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊

三、BFC的區域不會與float box重疊。毗鄰塊盒子的垂直外邊距摺疊只有他們是在同一BFC時纔會發生

四、BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。

五、計算BFC的高度時，浮動元素也參與計算

六、在BFC中，每一個盒子的左外邊框緊挨着左邊框的包含塊（從右到左的格式化時，則爲右邊框緊挨）。即便在浮動裏也是這樣的（儘管一個盒子的邊框會由於浮動而萎縮），除非這個盒子的內部建立了一個新的BFC（這種狀況下,因爲浮動，盒子自己將會變得更窄）

應用的場景

**上下邊距合併： ** html結構：

<div class="con">
    <p>num1</p>
    <p>num2</p>
      <p >num3</p>
</div>

css：

.con{
            width: 500px;
            background: sandybrown;
            overflow: hidden;
        }
        p{
            width: 200px;
            height:100px;
            margin: 10px;
            background: greenyellow;
        }
        .bfc{
            overflow: hidden;
        }

結果：上下邊距合併了

解決辦法：

將其中一個p元素加入到一個新的BFC塊中；

html結構改成：

<div class="con">
    <p>num1</p>
    <p>num2</p>
    <div class="bfc">
        <p >num3</p>
    </div>
</div>

結果以下:

清除浮動撐起塌陷的父元素：

css：

.parent{
           width: 400px;
           border: 1px solid red;
       }
        .children{
            width: 100px;
            height: 200px;
            float: left;
            background: aqua;
            margin-left: 10px;
        }

html結構：

<div class="parent">
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
</div>

結果：

若是將parent變成BFC，加上overflow：hidden建立一個新的BFC，在新的BFC中這些元素又迴歸到正常的文檔流

結果以下：

文字環繞：

css：

*{margin: 0;
        padding: 0}
        .parent{
            width: 250px;
            height: 200px;
            border: 1px solid red;
            margin-left: 10px;
            margin-top: 10px;
        }
        .float{
            width:100px;
            height:100px;
            text-align: center;
            vertical-align: center;
            float: left;
            border: 1px solid black;
            margin-left: 10px;
            margin-top:10px;
            line-height: 100px;
        }
        p{
            background: #ffcccc;
            /*overflow: hidden;*/
        }

html結構：

<div class="parent">
    <div class="float">
        浮動啦
    </div>
    <p>
 花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q
    </p>
</div>

結果：

根據第六條規則，將p元素建立成一個新的BFC，就能夠解決這個文字環繞問題，例如加上overflow：hidden；固然還有其餘的解決辦法，例如設置p的margin值、移動p、清除浮動

結果以下：

在見一個小例子：

html結構：

<div class="parent">
    <div class="children float"></div>
    <div class="children float"></div>
    <div class="children "></div>
    <div class="children float "></div>
    <div class="children float"></div>
</div>

css：

*{margin: 0;
        padding: 0}
        .parent{
            width: 500px;
            height: 420px;
            border: 1px solid red;
        }
        .float{
            float: left;
        }
    .children{
        width: 100px;
        height: 200px;
        margin-left: 15px;
        margin-top: 10px;
        background: peachpuff;
        text-align: center;
        line-height: 200px;
        border: 1px solid red;
        box-sizing: border-box;
    }
        .children:nth-child(3){
            overflow: hidden;
        }

結果：