css裏的BFC用法

BFC(Block Formatting Contexts)，可以把BFC理解為一個封閉的大箱子，容器裏面的子元素不會影響到外面的元素。

規則

1.內部的盒子會在垂直方向，一個個地放置。

2.BFC是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素

3.屬於同一個BFC的兩個相鄰BOx的上下margin會發生重疊

4.計算BFC的高度時，浮動元素也參與計算

5.每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此；

6.BFC的區域不會與float重疊；

哪些元素會觸發BFC

1.body根元素

2.浮動元素：float不為none的屬性值；

3.絕對定位元素：position（absolute、fixed）

4.display為：inline-block、table-cell、flex

5.overflow除了visible以外的值（hidden、auto、scroll）

BFC的應用

1.解決margin重疊問題

2.解決浮動高度塌陷問題

3.解決侵占浮動元素的問題

例：

1.margin重疊問題

我們先定義兩個垂直的div

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

css

    .box{
            width: 200px;
            height: 50px;
            margin: 30px 0;
            background: black;
        }
 

margin重疊後的效果

這滿足規則第三條：
屬於同一個BFC的兩個相鄰BOx的上下margin會發生重疊
說明兩者屬於同一個BFC，所以我們將兩個div放到不同的BFC中，為第二個div套上一個父元素，然後通過設置overflow hidden來激活BFC

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

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

css

    .content{
            overflow: hidden;
        }
    
 

效果圖為：

再來看看浮動高度塌陷問題

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

css

    .content{
            width:300px; 
            border:1px solid black; 
        }

        .content .box{
            width:100px;
            height:100px;
            border:1px solid red;   
            float:left;
        }
    

效果圖為：

能夠看到父元素沒有被撐開，BFC規則第四條：
計算BFC的高度時，浮動元素也參與計算
所以我們要將父元素觸發BFC

    .content{
            width:300px; 
            border:1px solid black; 

            overflow: hidden;
        }

效果圖為：

能都看到父元素已經撐開了。

再來看看侵占浮動元素的問題

先定義兩個div：

    <div class="left"></div>
    <div class="right"></div>

css

    .left{
            width: 100px;
            height: 100px;
            background: salmon;

            float: left;
        }

        .right{
            width: 300px;
            height: 200px;
            background: black;
        }
    

效果圖為：

滿足了規則第五點：
每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此

所以我們要將紅色區域撐到黑色區域的左邊，就需利用規則第六條
BFC的區域不會與float重疊
我們給黑色區域right設置一個 overflow: hidden; 屬性來觸發BFC；

.right{
            width: 300px;
            height: 200px;
            background: black;


            overflow: hidden;
        }
    

效果圖為:

能夠看到紅色區域已經撐到黑色區域的左邊

如果，您認為閱讀這篇博客讓你有些收獲，請您關註一下。感謝您的支持，如有不足，請多指教。

聯系方式：

wx：bsl521921

css裏的BFC用法