什麼是BFC？有什麼用？

BFC

（推薦教學：css快速入門）

即區塊格式化上下文（block formatting context） 是頁面CSS 視覺渲染的一部分。它是用來決定塊盒子的佈局及浮動相互影響的一個區域。

我的理解：

BFC是一個環境，​​在這個環境中的元素不會影響到其他環境中的佈局，也就是說，處於不同BFC中的元素是不會互相干擾的。

作用：

1、阻止外邊距折疊

#兩個相連的區塊級元素在垂直上的外邊距會發生疊加，有些把這種情況看作是bug，但我覺得可能是出於段落排版的考慮，為了令行間距一致才有的這一特性。我們先來看看例子：

*{margin: 0px;padding: 0px}
p {
    color: red;
    background: #eee;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    margin: 10px;
    border: solid 1px red;
}

從上面可以看出，我們給兩個p元素都設定margin,但中間的間距卻發生了折疊。然後舉個BFC的例子：

.ele{
    overflow: hidden;
    border: solid 1px red;
}

從上面可以看出，我們為每個div元素設定overflow的值為hidden,產生一個區塊級格式上下文，因為外邊距不會互相重疊。

2、BFC可以包含浮動的元素

#

*{margin: 0px;padding: 0px}
.floatL{
    float: left;
    width: 100px;
    height: 100px;
    background-color: red;
    text-align: center;
    line-height: 100px;
}
.box{
    border: 1px solid red;
    width: 300px;
    margin: 100px;
    padding: 20px;
}
.BFC{
    overflow: hidden;
    *zoom: 1;
}

從運行結果可以看出，如果區塊級元素裡麵包含著浮動元素會發生高度塌陷，但將它變成一個BFC後，BFC在計算高度時會自動將浮動元素計算在內。

3、BFC可以阻止元素被浮動元素覆蓋

#

*{margin: 0px; padding: 0px}

.box1{
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
    background-color: rgba(0, 0, 255, 0.5);
    border: 1px solid #000;
    float: left;
}
.box2{
    width: 200px;
    height: 200px;
    line-height: 100px;
    text-align: center;
    background-color: rgba(255, 0, 0, 0.5);
    border: 1px solid #000;
    /* overflow: hidden; */
    /* *zoom: 1; */
}

從上面看出，當元素浮動後，會與後面的區塊級元素產生相互覆蓋。那要怎麼解決這個問題，只要為後面的元素建立一個BFC。新增overflow屬性到box2上。

overflow: hidden;
*zoom: 1;

這樣子阻止了浮動元素重疊的問題。

以上是什麼是BFC？有什麼用？的詳細內容。更多資訊請關注PHP中文網其他相關文章！