CSS中的BFC詳解

時間 2019-11-18

標籤 css bfc 詳解欄目 CSS 简体版

原文原文鏈接

引言：css

這篇文章是我對BFC的理解及總結，帶你揭開BFC的面紗。你將會知道BFC是什麼，造成BFC的條件，BFC的相關特性，以及他的實際應用。html

1、何爲BFC瀏覽器

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

2、造成BFC的條件佈局

一、浮動元素，float 除 none 之外的值；
二、定位元素，position（absolute，fixed）；
三、display 爲如下其中之一的值 inline-block，table-cell，table-caption；
四、overflow 除了 visible 之外的值（hidden，auto，scroll）；字體

3、BFC的特性spa

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

看到這裏是否是有丈二和尚摸不着頭腦的感受，下面我就用案例來幫助理解認識：orm

4、實踐是檢驗真理的惟一標準htm

（1）BFC中的盒子對齊

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

浮動的元素也是這樣，box3浮動，他依然接着上一個盒子垂直排列。而且全部的盒子都左對齊。

html：

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

css:

        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;
        }

（2）外邊距摺疊

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

在常規文檔流中，兩個兄弟盒子之間的垂直距離是由他們的外邊距所決定的，但不是他們的兩個外邊距之和，而是以較大的爲準。

html：

    <div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>

css：

        .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;
        }

這裏我門能夠看到，第一個子盒子有上邊距（不會發生margin穿透的問題）；兩個子盒子的垂直距離爲20px而不是30px，由於垂直外邊距會摺疊，間距以較大的爲準。

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

html：

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

css：

    .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;
    }

（3）不被浮動元素覆蓋

以常見的兩欄佈局爲例。

左邊固定寬度，右邊不設寬，所以右邊的寬度自適應，隨瀏覽器窗口大小的變化而變化。

html：

    <div class="column"></div>
    <div class="column"></div>

css：

        .column:nth-of-type(1) {
            float: left;
            width: 200px;
            height: 300px;
            margin-right: 10px;
            background-color: red;
        }
        
        .column:nth-of-type(2) {
            overflow: hidden;/*建立bfc */
            height: 300px;
            background-color: purple;
        }

還有三欄佈局。

左右兩邊固定寬度，中間不設寬，所以中間的寬度自適應，隨瀏覽器的大小變化而變化。

html：

    <div class="contain">
        <div class="column"></div>
        <div class="column"></div>
        <div class="column"></div>
    </div>

css：

        .column:nth-of-type(1),
        .column:nth-of-type(2) {
            float: left;
            width: 100px;
            height: 300px;
            background-color: green;
        }
        
        .column:nth-of-type(2) {
            float: right;
        }
        
        .column:nth-of-type(3) {
            overflow: hidden;  /*建立bfc*/
            height: 300px;
            background-color: red;
        }

也能夠用來防止字體環繞：

衆所周知，浮動的盒子會遮蓋下面的盒子，可是下面盒子裏的文字是不會被遮蓋的，文字反而還會環繞浮動的盒子。這也是一個比較有趣的特性。

html：

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

css：

（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;
        }