1.什么是BFC垒棋？
在解釋 BFC 是什么之前，需要先介紹 Box、Formatting Context的概念捺檬。
Box： CSS布局的基本單位
Box 是 CSS 布局的對(duì)象和基本單位， 直觀點(diǎn)來(lái)說(shuō)贸铜，就是一個(gè)頁(yè)面是由很多個(gè)** Box** 組成的堡纬。元素的類型和 display 屬性聂受，決定了這個(gè) Box 的類型。 不同類型的 Box烤镐， 會(huì)參與不同的Formatting Context（一個(gè)決定如何渲染文檔的容器）蛋济，因此Box內(nèi)的元素會(huì)以不同的方式渲染。讓我們看看有哪些盒子：
block-level box：display 屬性為 block, list-item, table 的元素炮叶，會(huì)生成** block-level box碗旅。并且參與 block fomatting context；
inline-level box：display** 屬性為 inline, inline-block, inline-table 的元素镜悉，會(huì)生成 inline-level box祟辟。并且參與** inline formatting context；
run-in box：css3** 中才有侣肄， 這兒先不講了旧困。Formatting context
Formatting context 是 W3C CSS2.1 規(guī)范中的一個(gè)概念。它是頁(yè)面中的一塊渲染區(qū)域稼锅，并且有一套渲染規(guī)則吼具，它決定了其子元素將如何定位，以及和其他元素的關(guān)系和相互作用矩距。最常見(jiàn)的** Formatting context 有 Block fomatting context (簡(jiǎn)稱BFC)和 Inline formatting context (簡(jiǎn)稱IFC)**拗盒。
CSS2.1 中只有 BFC 和 IFC
CSS3 中還增加了 GFC 和 FFC。
2. BFC 定義
BFC(Block formatting context)直譯為"塊級(jí)格式化上下文"锥债。它是一個(gè)獨(dú)立的渲染區(qū)域陡蝇，只有Block-level box參與， 它規(guī)定了內(nèi)部的Block-level Box如何布局赞弥，并且與這個(gè)區(qū)域外部毫不相干毅整。
3. BFC布局特性
1. 內(nèi)部的盒會(huì)在垂直方向一個(gè)接一個(gè)排列（可以看作BFC中有一個(gè)的常規(guī)流）；
2. 處于同一個(gè)BFC中的元素相互影響绽左，可能會(huì)發(fā)生margin collapse悼嫉；
3. 每個(gè)元素的margin box的左邊，與容器塊border box的左邊相接觸
(對(duì)于從左往右的格式化拼窥，否則相反)戏蔑。即使存在浮動(dòng)也是如此；
4. BFC就是頁(yè)面上的一個(gè)隔離的獨(dú)立容器鲁纠，容器里面的子元素不會(huì)影響到外面的元素总棵，反之亦然；
5. 計(jì)算BFC的高度時(shí)改含，考慮BFC所包含的所有元素情龄，連浮動(dòng)元素也參與計(jì)算；
6. 浮動(dòng)盒區(qū)域不疊加到BFC上
這么多性質(zhì)有點(diǎn)難以理解，但可以作如下推理來(lái)幫助理解：html的根元素就是<html>骤视，而根元素會(huì)創(chuàng)建一個(gè)BFC鞍爱，創(chuàng)建一個(gè)新的BFC時(shí)就相當(dāng)于在這個(gè)元素內(nèi)部創(chuàng)建一個(gè)新的<html>，子元素的定位就如同在一個(gè)新<html>頁(yè)面中那樣专酗，而這個(gè)新舊html頁(yè)面之間時(shí)不會(huì)相互影響的睹逃。
上述這個(gè)理解并不是最準(zhǔn)確的理解，甚至是將因果倒置了（因?yàn)閔tml是根元素祷肯，因此才會(huì)有BFC的特性沉填，而不是BFC有html的特性），但這樣的推理可以幫助理解BFC這個(gè)概念佑笋。
2.哪些元素會(huì)生成BFC翼闹？
1. 根元素 <html>
2. float屬性不為none
3. position為absolute或fixed
4. display為inline-block, table-cell, table-caption, flex, inline-flex
5. overflow不為visible
3. margin collapse（邊距坍塌&邊距重疊）
- 在理解bfc的原理之前先讓我們理解一下什么是margin collapse（邊距坍塌&邊距重疊）
實(shí)例：
.box2{
background: lightblue;
width:100px;
}
<div class="box2">
</div>
當(dāng)box2中沒(méi)有任何填充內(nèi)容，文字或圖片等允青。且沒(méi)有指定垂直邊框boder-top橄碾、boder-bottom
那么上面的代碼在頁(yè)面上不會(huì)顯示任何效果卵沉。
當(dāng)我們?yōu)閎ox2里填充一些文字
<div class="box2">
這是box2填充內(nèi)容
</div>
或者指定垂直邊框 boder-top颠锉、boder-bottom
.box2{
background: lightblue;
width:100px;
border-top:1px solid transparent ;
}
一個(gè)DIV和它的子DIV特別重視垂直邊框或填充，也就好像是史汗，一口鍋琼掠，里面放個(gè)盆，能不能扣住里面的盆停撞，主要看鍋蓋了瓷蛙，垂直邊框或填充就是這個(gè)“鍋蓋”。于是解決的方式至少有以下三種：
- 邊框戈毒，當(dāng)然可以設(shè)置邊框?yàn)橥该?
- 為父容器添加padding艰猬，或者至少添加padding-top;
- 將父容器BFC化;
<style type="text/css">
.box {
background: lightblue;
width: 300px;
height: 250px;
margin: 20px;
/* 1.設(shè)置垂直邊框
border-top:1px solid transparent ;
border-bottom: 1px solid transparent;
*/
/* 2.為父DIV添加padding，或者至少添加padding-top
padding: 1px 0;
*/
/* 3.各種可BFC化得條件
overflow: hidden;
*/
}
.children {
width: 200px;
background: lightcoral;
height: 200px;
margin: 10px;
}
</style>
<body>
<div class="box">
</div>
<div class="box" style="height: auto;">
<div class="children" >
</div>
</div>
</body>
4.代碼實(shí)例與BFC原理分析
-
實(shí)例1
特性1埋市，特性2冠桃，特性4
<style type="text/css">
.bfc {
background-color: lightblue;
overflow: hidden;
width: 500px;
}
p {
background-color: lightcoral;
height: 50px;
line-height: 50px;
margin: 10px ;
}
.new-bfc{
overflow: hidden;
}
</style>
<body>
<div class="bfc">
<p>children 1</p>
<p>children 2</p>
<p>children 3</p>
<div class="new-bfc">
<p>children 4</p>
</div>
</div>
</body>
-
實(shí)例2
特性3 特性6
<style type="text/css"> body { margin: 0; padding:200px; } #box { background: lightblue; width: 600px; } .right { background: lightcoral; opacity: 0.5; border: 3px solid saddlebrown; width: 300px; min-height: 100px; } .left { background: lightseagreen; border: 3px solid saddlebrown; width: 200px; height: 200px; } </style> <body> <div id="box"> <div class="left"> </div> <div class="right"> </div> </div> </body>
當(dāng)給.left 加上左浮動(dòng)
.left {
background: lightseagreen;
border: 3px solid saddlebrown;
width: 200px;
height: 200px;
float: left;
}
-
實(shí)例3
特性5
現(xiàn)在通過(guò) 給 #box 設(shè)置 overflow:hidden 來(lái)創(chuàng)建BFC，再看看效果如何道宅。
#box {
background: lightblue;
width: 600px;
overflow: hidden;
}
-
實(shí)例4
特性4
現(xiàn)在通過(guò) 給 .right 中放入一些灰色小塊食听，再看看效果如何。
.item{
background: lightslategrey;
width: 50px;
height: 50px;
margin: 10px;
float: left;
}
接下來(lái)污茵，在.item 的父元素.right 上我們也添加一個(gè)左浮動(dòng)樱报，再看看效果。
.right {
background: lightcoral;
opacity: 0.5;
border: 3px solid saddlebrown;
width: 300px;
min-height: 100px;
float: left;
}
以上就是BFC的分析泞当，BFC的概念比較抽象迹蛤，但通過(guò)實(shí)例分析應(yīng)該能夠更好地理解BFC。在實(shí)際中，利用BFC可以閉合浮動(dòng)（實(shí)例3）盗飒，防止與浮動(dòng)元素重疊（實(shí)例4）穷缤。同時(shí)，由于BFC的隔離作用箩兽，可以利用BFC包含一個(gè)元素津肛，防止這個(gè)元素與BFC外的元素發(fā)生margin collapse。
文中實(shí)例
參考
http://www.wtoutiao.com/p/AfdISl.html
http://blog.chinaunix.net/uid-22414998-id-3138656.html
http://www.reibang.com/p/fc1d61dace7b
