css裏的BFC用法

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