css中的BFC是什么？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

10年積累的成都做網(wǎng)站、成都網(wǎng)站設(shè)計、成都外貿(mào)網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有五常免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

BFC

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

我的理解：

BFC是一個環(huán)境，在這個環(huán)境中的元素不會影響到其他環(huán)境中的布局，也就是說，處于不同BFC中的元素是不會互相干擾的。

作用：

1、阻止外邊距折疊

兩個相連的塊級元素在垂直上的外邊距會發(fā)生疊加，有些把這種情況看作是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元素都設(shè)置margin,但中間的間距卻發(fā)生了折疊。然后舉個BFC的例子：

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

從上面可以看出，我們?yōu)槊總€div元素設(shè)置overflow的值為hidden,產(chǎn)生一個塊級格式上下文，因?yàn)橥膺吘嗖粫嗷ブ丿B。

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;
}

從運(yùn)行結(jié)果可以看出，如果塊級元素里面包含著浮動元素會發(fā)生高度塌陷，但是將它變成一個BFC后，BFC在計算高度時會自動將浮動元素計算在內(nèi)。

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; */
}

從上面看出，當(dāng)元素浮動后，會與后面的塊級元素產(chǎn)生相互覆蓋。那怎么解決這個問題，只要為后面的元素創(chuàng)建一個BFC。添加overflow屬性到box2上。

overflow: hidden;
*zoom: 1;

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

看完上述內(nèi)容是否對您有幫助呢？如果還想對相關(guān)知識有進(jìn)一步的了解或閱讀更多相關(guān)文章，請關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝您對創(chuàng)新互聯(lián)的支持。