之前在開發(fā)的時(shí)候，總會(huì)遇到margin塌陷，浮動(dòng)布局等問題，也知道怎么去解決，但始終不知道其內(nèi)部原理，后來也是通過網(wǎng)友的一篇文章，點(diǎn)醒了我，下面就分享給大家

一 什么是BFC？

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

塊級(jí)盒子元素：display:block, list-item, table 這些元素會(huì)參與BFC布局

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

二 BFC的布局規(guī)則

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

如何創(chuàng)建BFC

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

三 BFC應(yīng)用

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

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

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

image.png

此時(shí)會(huì)發(fā)現(xiàn)，上下兩個(gè)元素的margin的值為各自的margin值，從而解決了margin塌陷

2.清除浮動(dòng)

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

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

image.png

3.自適應(yīng)兩列布局

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

    <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

四 總結(jié)

這幾個(gè)例子都說明了

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

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