之前在開發的時候，總會遇到margin塌陷，浮動布局等問題，也知道怎么去解決，但始終不知道其內部原理，后來也是通過網友的一篇文章，點醒了我，下面就分享給大家

一 什么是BFC？

BFC(Block formattingcontext)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有塊級盒子元素參與，它規定了內部的塊級盒子元素如何布局，并且與這個區域外部毫不相干。

塊級盒子元素：display:block, list-item, table 這些元素會參與BFC布局

Formatting Context：Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。

二 BFC的布局規則

1.內部的Box會在垂直方向，一個接一個地放置
2.Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊(傳說中的margin塌陷)
3.每個盒子（塊盒與行盒）的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此
4.BFC的區域不會與float box重疊
5.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此
6.計算BFC的高度時，浮動元素也參與計算

如何創建BFC

1.float的值不是none
2.position的值不是static或者relative
4.display的值是inline-block、table-cell、flex、table-caption或者inline-flex
5.overflow的值不是visible

三 BFC應用

1.解決margin塌陷問題

html部分

   <div class="top">1</div>
   <div class="bottom">2</div>

css部分

.top{
    margin: 30px;
    width: 150px;
    height: 300px;
    background: lime;
    color: #fff;
}
.bottom{
    margin: 50px;
    width: 150px;
    height: 300px;
    background: rgb(134, 68, 37);
    color: #fff;
}

微信截圖_20210501172603.png

此時的上下兩個元素間margin為數值大的那個值，即bottom類對應的margin
我們稍加改造一下.bottom的樣式 加上display：inline-block(參考如何創建BFC中的第四條)

.bottom{
    margin: 50px;
    width: 150px;
    height: 300px;
    background: rgb(134, 68, 37);
    color: #fff;
    display: inline-block; 
}

image.png

此時會發現，上下兩個元素的margin的值為各自的margin值，從而解決了margin塌陷

2.清除浮動

html部分

<div class="wrap">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

css部分

.wrap {
    background: lime;
    border: 20px solid linen;
}
.item{
    float: left;
    background: lightsalmon;
    height: 100px;
    width: 150px;
    margin: 10px;
}

image.png

image.png

此外，還可以設置display：inline-block(只不過需要給定父容器寬度)

image.png

3.自適應兩列布局

每個盒子的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。(這有些抽象，直接看效果吧)

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

.left{
    width: 150px;
    background: coral;
    color: #fff;
    text-align: center;
    height: 300px;
    float: left;
}
.right{
    background:lightseagreen;
    color: #fff;
    text-align: center;
    height: 500px;
}

image.png

image.png

四 總結

這幾個例子都說明了

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

[參考文章]
什么是BFC？看這一篇就夠了_Leon的博客-CSDN博客_bfc