???????css中總是存在一些古老而又強(qiáng)大的特性遮怜，雖然css3玻驻，以及即將面世的css4極大節(jié)約了我們的開發(fā)成本凭迹，但是根植于css2中那些巧妙的技巧仍然能夠令我們?yōu)橹@嘆。今天晦炊，我們就來(lái)學(xué)習(xí)一個(gè)功能非常強(qiáng)大鞠鲜，兼容性也非常好的知識(shí)點(diǎn)BFC（格式化上下文）*。
一断国、何為BFC
???????BFC（Block Formatting Context）格式化上下文贤姆，是Web頁(yè)面中盒模型布局的CSS渲染模式，指一個(gè)獨(dú)立的渲染區(qū)域或者說(shuō)是一個(gè)隔離的獨(dú)立容器稳衬，默認(rèn)情況下只有根元素（即body）一個(gè)塊級(jí)上下文霞捡。
二、形成BFC的條件
???????1薄疚、浮動(dòng)元素碧信，float除none以外的值。
???????2街夭、定位元素position(absolute,fixed)砰碴。
???????3、display 為以下其中之一的值 inline-block板丽，table-cell呈枉，table-caption；
???????4埃碱、overflow 除了 visible 以外的值（hidden猖辫，auto，scroll）砚殿；
三啃憎、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ì)影響外面元素名党。
???????如果您之前對(duì)BFC的不是很了解的話，那么上面的幾條特性可能會(huì)讓您感到困惑挠轴。我們下面將逐條進(jìn)行敘述传睹。
四、實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)
1岸晦、BFC中的盒子對(duì)齊
???????特性的第一條是：內(nèi)部的Box（塊級(jí)元素）會(huì)在垂直方向上一個(gè)接一個(gè)的放置欧啤。（這條特性不必糾結(jié)睛藻，即便不在BFC里塊級(jí)盒子也會(huì)垂直排列）
2、外邊距折疊
???????特性的第二條：垂直方向上的距離由margin決定
???????在常規(guī)文檔流中邢隧，兩個(gè)兄弟盒子之間的垂直距離是由他們的外邊距所決定的店印，但不是他們的兩個(gè)外邊距之和，而是以較大的為準(zhǔn)倒慧。
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
</div>
<style>
.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;
}
</style>
???????這里我門可以看到按摘，第一個(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>
<style>
.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;
}
</style>
3汰寓、不被浮動(dòng)元素覆蓋
???????以常見的兩欄布局為例口柳。
???????左邊固定寬度，右邊不設(shè)寬有滑，因此右邊的寬度自適應(yīng)跃闹，隨瀏覽器窗口大小的變化而變化。
<div class="column"></div>
<div class="column"></div>
<style>
.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;
}
</style>
???????還有三欄布局毛好。
???????左右兩邊固定寬度望艺，中間不設(shè)寬，因此中間的寬度自適應(yīng)肌访，隨瀏覽器的大小變化而變化找默。
<div class="contain">
<div class="column"></div>
<div class="column"></div>
<div class="column"></div>
</div>
<style>
.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;
}
</style>
???????也可以用來(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)的塊
???????我們經(jīng)常會(huì)在父元素里設(shè)置某個(gè)子元素浮動(dòng)。浮動(dòng)后酒请，子元素脫離了文檔流骡技，使得父元素?zé)o法包住這個(gè)浮動(dòng)的子元素。我們通常在父元素上設(shè)置一個(gè)clearfix的偽元素來(lái)清除浮動(dòng)；同樣布朦，我們可以利用BFC可以包含浮動(dòng)這一特性來(lái)清除浮動(dòng)囤萤。
???????當(dāng)給.parent設(shè)置overflow:hidden時(shí)，實(shí)際上創(chuàng)建了一個(gè)超級(jí)屬性BFC是趴，此超級(jí)屬性反過(guò)來(lái)決定了height:auto是如何計(jì)算的涛舍。在“BFC布局規(guī)則”中提到：計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算唆途。因此做盅，父元素在計(jì)算其高度時(shí)，加入了浮動(dòng)元素的高度窘哈，“順便”達(dá)成了清除浮動(dòng)的目標(biāo)吹榴，所以父元素就包裹住了子元素。
???????除了給.parent設(shè)置overflow:hidden滚婉，我們還可以設(shè)置display:inline-block图筹、position:absolute、float:left等方式來(lái)創(chuàng)建一個(gè)BFC让腹，從而達(dá)到包裹浮動(dòng)子元素的效果（具體使用哪種方法要看項(xiàng)目需求）.
