CSS 小結筆記之BFC

時間 2019-12-12

標籤 css 小結筆記 bfc 欄目 CSS 简体版

原文原文鏈接

BFC 即爲Block formatting context 的縮寫，BFC 主要用來將一個盒子設置爲一個隔離的容器，無論盒子內部的元素具備什麼屬性，都不會影響到盒子的外面。html

一、哪些元素能產生BFC

不是全部的元素都能產生BFC的，只有display 屬性爲 block, list-item, table 的元素，才能夠產生BFC。ide

這點其實根據BFC的主要做用應該能夠很形象的理解。「必須表現爲一塊一塊的，才能給出一個隔離的空間「。flex

二、觸發BFC的具體條件

光有BFC的潛質，不表明就直接會觸發BFC。觸發BFC 須要至少知足下列條件中的一條：ui

（1）、具備浮動（即float不爲none）

（2）、具備絕對定位或固定定位（position：absolute |fixed）

（3）、display爲inline-block, table-cell, table-caption, flex, inline-flex

（4）、overflow不爲visible（通常設置overflow：hidden）

三、BFC盒子的特性

（1）、BFC內部的盒子是從上到下一個接着一個排列的（正常的塊級元素排列也是如此）

（2）、BFC內部的盒子之間的距離是經過margin值來設置的，相鄰的兩個盒子的margin會重疊

（3）、BFC盒子內部的子盒子是緊貼着BFC盒子的邊緣的（從左到右排列，則子盒子的左邊緣緊貼着BFC的左邊框（不與邊框重疊）；從右到左排列，則子盒子的右邊緣緊貼着BFC盒子的右邊框）

（4）、BFC盒子不會與浮動的盒子產生重疊，而是緊靠着浮動的邊緣

（5）、計算BFC的高度時，也會自動計算浮動或定位的盒子的高度

四、BFC的具體應用

（1）、清除元素內部的浮動（特性（5）的應用）

正常狀況下當父盒子不給出高度時，子盒子的高度會將把父盒子自動撐開來，讓父盒子具備高度。spa

而若是子元素都具備浮動時，父盒子就不會被撐開。這時使父盒子具備BFC屬性便可同時計算浮動盒子的高度code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .fa {
            width: 200px;
            margin: 100px auto;
            border: 2px solid red;
            background-color: aqua;
        }
        
        .fa div {
            width: 100px;
            height: 100px;
            float: left;
            border: 2px solid yellowgreen;
            background-color: deeppink;
        }
        
        .fa .son2 {
            border: 2px solid grey;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="son1"></div>
        <div class="son2"></div>
    </div>
</body>

</html>

View Code

在父盒子沒有觸發BFC時，顯示的結果以下orm

而經過2中的方法，給.fa 添加BFC （例如增長一句overflow: hidden;）效果以下htm

（2）、解決外邊距合併的問題（特性（2）的應用）

根據上述的3-（2）所說，BFC內部的相鄰的兩個盒子的margin值會重疊，那麼若是不屬於同一個BFC則能夠解決這個問題blog

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .fa {
            width: 200px;
            margin: 100px auto;
            height: 400px;
            border: 2px solid red;
            background-color: aqua;
            overflow: hidden;
        }
        
        .son1,
        .son2 {
            width: 100px;
            height: 100px;
            border: 2px solid yellowgreen;
            background-color: deeppink;
        }
        
        .son1 {
            margin-bottom: 50px;
        }
        
        .son2 {
            margin-top: 100px;
            border: 2px solid grey;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div class="fa">

        <div class="son1"></div>

        <div class="son2"></div>
    </div>
</body>

</html>

View Code

同一個BFC下，.son1的下邊距爲50px .son2的上邊距爲100px 按照咱們通常想要的結果是，.son1 與.son2 之間的距離爲150px；it

而實際效果入下：

能夠很明顯看出，他們之間的距離只有100px，他們的margin重疊了。

若是給.son1 外邊在嵌套一個BFC 則 .son1 與.son2，不屬於同一個BFC就不會產生這個狀況結果以下：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .fa {
            width: 200px;
            margin: 100px auto;
            height: 400px;
            border: 2px solid red;
            background-color: aqua;
            overflow: hidden;
        }
        
        .son1,
        .son2 {
            width: 100px;
            height: 100px;
            border: 2px solid yellowgreen;
            background-color: deeppink;
        }
        
        .bfc {
            overflow: hidden;
        }
        
        .son1 {
            margin-bottom: 50px;
        }
        
        .son2 {
            margin-top: 100px;
            border: 2px solid grey;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div class="fa">
        <div class="bfc">
            <div class="son1"></div>
        </div>
        <div class="son2"></div>
    </div>
</body>

</html>

View Code

（3）、使右側盒子寬度自適應（特性（4）的應用）

一個父盒子內部有兩個子盒子，若是第一個子盒子有浮動，而第二個子盒子沒有浮動，則第一個子盒子會蓋在第二個盒子上面。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .fa {
            width: 400px;
            margin: 100px auto;
            height: 400px;
            border: 2px solid red;
            background-color: aqua;
        }
        
        .son1 {
            width: 100px;
            height: 100px;
            border: 2px solid yellowgreen;
            background-color: deeppink;
            float: left;
        }
        .son2 {
            height: 200px;
           
            border: 2px solid grey;
            background-color: hotpink;
        }
    </style>
</head>

<body>
    <div class="fa">

        <div class="son1"></div>

        <div class="son2">這裏有一大段文字這裏有一大段文字這裏有一大段文字這裏有一大段文字這裏有一大段文字這裏有一大段文字這裏有一大段文字這裏有一大段文字這裏有一大段文字這裏有一大段文字這裏有一大段文字這裏有一大段文字這裏有一大段文字這裏有一大段文字</div>
    </div>
</body>

</html>