站長(zhǎng)資訊網(wǎng)在css中，bfc中文意思為“塊級(jí)格式化上下文”，是Web頁(yè)面中盒模型布局的CSS渲染模式，指一個(gè)獨(dú)立的渲染區(qū)域或者說(shuō)是一個(gè)隔離的獨(dú)立容器。塊格式化上下文包含創(chuàng)建它的元素內(nèi)部的所有內(nèi)容。
本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
何為BFC
BFC（Block Formatting Context）塊級(jí)格式化上下文，是Web頁(yè)面中盒模型布局的CSS渲染模式，指一個(gè)獨(dú)立的渲染區(qū)域或者說(shuō)是一個(gè)隔離的獨(dú)立容器。
BFC 即 Block Formatting Contexts (塊級(jí)格式化上下文)，屬于普通流。
可以把 BFC 理解為一個(gè)封閉的大箱子，箱子內(nèi)部的元素?zé)o論如何翻江倒海，都不會(huì)影響到外部。
形成BFC的條件
1、浮動(dòng)元素，float 除 none 以外的值；
2、絕對(duì)定位元素，position（absolute，fixed）；
3、display 為以下其中之一的值 inline-block，table-cell，table-caption、flex；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）；
5、body 根元素
BFC的特性
1.內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)的放置。
2.垂直方向上的距離由margin決定
3.bfc的區(qū)域不會(huì)與float的元素區(qū)域重疊。
4.計(jì)算bfc的高度時(shí)，浮動(dòng)元素也參與計(jì)算
5.bfc就是頁(yè)面上的一個(gè)獨(dú)立容器，容器里面的子元素不會(huì)影響外面元素。
實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)
（1）BFC中的盒子對(duì)齊
特性的第一條是：內(nèi)部的Box會(huì)在垂直方向上一個(gè)接一個(gè)的放置。
浮動(dòng)的元素也是這樣，box3浮動(dòng)，他依然接著上一個(gè)盒子垂直排列。并且所有的盒子都左對(duì)齊。
html：
<div class="container"> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> <div class="box4"></div> </div>
div { height: 20px; } .container { position: absolute; /* 創(chuàng)建一個(gè)BFC環(huán)境*/ height: auto; background-color: #eee; } .box1 { width: 400px; background-color: red; } .box2 { width: 300px; background-color: green; } .box3 { width: 100px; background-color: yellow; float: left; } .box4 { width: 200px; height: 30px; background-color: purple; }
（2）外邊距折疊
特性的第二條：垂直方向上的距離由margin決定
在常規(guī)文檔流中，兩個(gè)兄弟盒子之間的垂直距離是由他們的外邊距所決定的，但不是他們的兩個(gè)外邊距之和，而是以較大的為準(zhǔn)。
html：
<div class="container"> <div class="box"></div> <div class="box"></div> </div>
.container { overflow: hidden; width: 100px; height: 100px; background-color: red; } .box1 { height: 20px; margin: 10px 0; background-color: green; } .box2 { height: 20px; margin: 20px 0; background-color: green; }
這里我門可以看到，第一個(gè)子盒子有上邊距（不會(huì)發(fā)生margin穿透的問(wèn)題）；兩個(gè)子盒子的垂直距離為20px而不是30px，因?yàn)榇怪蓖膺吘鄷?huì)折疊，間距以較大的為準(zhǔn)。
那么有沒(méi)有方法讓垂直外邊距不折疊呢？答案是：有。特性的第5條就說(shuō)了：bfc就是頁(yè)面上的一個(gè)獨(dú)立容器，容器里面的子元素不會(huì)影響外面元素，同樣外面的元素不會(huì)影響到BFC內(nèi)的元素。所以就讓box1或box2再處于另一個(gè)BFC中就行了。
<div class="container"> <div class="wrapper"> <div class="box1"></div> </div> <div class="box2"></div> </div>
.container { overflow: hidden; width: 100px; height: 100px; background-color: red; } .wrapper { overflow: hidden; } .box1 { height: 20px; margin: 10px 0; background-color: green; } .box2 { height: 20px; margin: 20px 0; background-color: green; }
（3）不被浮動(dòng)元素覆蓋
以常見(jiàn)的兩欄布局為例。
左邊固定寬度，右邊不設(shè)寬，因此右邊的寬度自適應(yīng)，隨瀏覽器窗口大小的變化而變化。
html：
<div class="column"></div> <div class="column"></div>
.column:nth-of-type(1) { float: left; width: 200px; height: 300px; margin-right: 10px; background-color: red; } .column:nth-of-type(2) { overflow: hidden;/*創(chuàng)建bfc */ height: 300px; background-color: purple; }
還有三欄布局。
左右兩邊固定寬度，中間不設(shè)寬，因此中間的寬度自適應(yīng)，隨瀏覽器的大小變化而變化。
html：
<div class="contain"> <div class="column"></div> <div class="column"></div> <div class="column"></div> </div>
.column:nth-of-type(1), .column:nth-of-type(2) { float: left; width: 100px; height: 300px; background-color: green; } .column:nth-of-type(2) { float: right; } .column:nth-of-type(3) { overflow: hidden; /*創(chuàng)建bfc*/ height: 300px; background-color: red; }
也可以用來(lái)防止字體環(huán)繞：
眾所周知，浮動(dòng)的盒子會(huì)遮蓋下面的盒子，但是下面盒子里的文字是不會(huì)被遮蓋的，文字反而還會(huì)環(huán)繞浮動(dòng)的盒子。這也是一個(gè)比較有趣的特性。
html：
<div class="left"></div> <p>你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好 你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好 </p>
css：
（1）環(huán)繞
.left { float: left; width: 100px; height: 100px; background-color: yellow; } p { background-color: green; /* overflow: hidden; */ }
（2）利用bfc防止環(huán)繞
.left { float: left; width: 100px; height: 100px; background-color: yellow; } p { background-color: green; overflow: hidden; }
（4）BFC包含浮動(dòng)的塊
這個(gè)是大家再熟悉不過(guò)的了，利用overflow:hidden清除浮動(dòng)嘛，因?yàn)楦?dòng)的盒子無(wú)法撐出處于標(biāo)準(zhǔn)文檔流的父盒子的height。這個(gè)就不過(guò)多解釋了，相信大家都早已理解。
⑵ BFC可以包含浮動(dòng)的元素(清除浮動(dòng))
浮動(dòng)的元素會(huì)脫離普通文檔流，來(lái)看下下面一個(gè)例子:
<div style="border: 1px solid #000;"> <div style="width: 100px;height: 100px;background: #eee;float: left;"></div> </div>
由于容器內(nèi)元素浮動(dòng)脫離文檔流，導(dǎo)致容器只剩下2px邊距高度，我們這時(shí)候可以采用BFC：
<div style="border: 1px solid #000;overflow: hidden"> <div style="width: 100px;height: 100px;background: #eee;float: left;"></div> </div>
⑶ 可以阻止元素被浮動(dòng)元素覆蓋
先看一個(gè)文字環(huán)繞效果:
<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一個(gè)左浮動(dòng)的元素</div> <div style="width: 200px; height: 200px;background: #eee">我是一個(gè)沒(méi)有設(shè)置浮動(dòng), 也沒(méi)有觸發(fā) BFC 元素, width: 200px; height:200px; background: #eee;</div>
這時(shí)候其實(shí)第二個(gè)元素有部分被浮動(dòng)元素所覆蓋，(但是文本信息不會(huì)被浮動(dòng)元素所覆蓋) 如果想避免元素被覆蓋，可觸第二個(gè)元素的 BFC 特性，
在第二個(gè)元素中加入 overflow: hidden，就會(huì)變成：
學(xué)習(xí)視頻分享：css視頻教程
