BFC是什么檐蚜？
BFC（Block Formatting Context）直譯為“塊級格式化范圍 ”贯城。
是 W3C CSS 2.1 規(guī)范中的一個概念加缘，它決定了元素如何對其內容進行定位鸭叙，以及與其他元素的關系和相互作用。當涉及到可視化布局的時候拣宏，Block Formatting Context提供了一個環(huán)境沈贝，HTML元素在這個環(huán)境中按照一定規(guī)則進行布局。一個環(huán)境中的元素不會影響到其它環(huán)境中的布局勋乾。
BFC 的特征
在BFC中宋下，盒子從頂端開始垂直地一個接一個地排列嗡善，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中学歧，兩個相鄰的塊級盒子的垂直外邊距會產(chǎn)生折疊滤奈。
在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對于從右到左的格式來說撩满，則觸碰到右邊緣）。
BFC中的元素的布局是不受外界的影響（我們往往利用這個特性來消除浮動元素對其非浮動的兄弟元素和其子元素帶來的影響绅你。）并且在一個BFC中伺帘，塊盒與行盒（行盒由一行中所有的內聯(lián)元素所組成）都會垂直的沿著其父元素的邊框排列。
計算BFC的高度時忌锯，浮動元素也參與計算（可用于解決浮動造成的高度塌陷問題）
BFC的區(qū)域不會與float box重疊(解決浮動元素文字環(huán)繞問題)
觸發(fā)BFC
- float 的值不為none
- position 的值不為static或者relative
- display的值為 table-cell, table-caption, inline-block, flex, 或者 inline-flex中的其中一個
- overflow的值不為visible
滿足上述條件中至少一項伪嫁，即可觸發(fā) BFC
使用場景
1、外邊距折疊問題
折疊的條件：兩個元素的 margin 必須是 相鄰 的偶垮；兩個 margin 是鄰接的必須滿足以下條件：
- 必須是處于常規(guī)文檔流（非float和絕對定位）的塊級盒子,并且處于同一個 BFC 當中张咳。
- 沒有inline盒子，沒有空隙似舵，沒有 padding 和 border 將他們分隔開脚猾。
- 都屬于垂直方向上相鄰的外邊距。
如下：
<div clss="container">
<div class="f-block">
</div>
<div class="s-block">
</div>
</div>
.f-block
{
width:200px;
height:200px;
background-color:silver;
margin:10px;
}
.s-block
{
width:200px;
height:200px;
background-color:silver;
margin:10px;
}
解決方法：
破壞產(chǎn)生折疊的條件即可：
1砚哗、給元素添加浮動或者絕對定位（會影響整體布局龙助，改動大）
2、將元素改為行內元素（會影響整體布局蛛芥，改動大）
3提鸟、元素間插入一個高度大于0的div
4、使元素不在同一BFC中
<!--元素間插入一個高度大于0的div-->
<div class="f-block">
</div>
<div style="height:0.01px"></div>
<div class="s-block">
</div>
<div class="f-block"></div>
<div>
<div class="s-block"></div>
</div>
f-block,s-block以及s-block外層div已經(jīng)還是處在相同BFC中仅淑，所以還是會產(chǎn)生外邊距折疊称勋。這里產(chǎn)生的折疊比較復雜：
首先是s-block和外層div的外邊距折疊，然后是合并后的折疊外邊距再與f-block產(chǎn)生外邊距折疊涯竟。
下面解決父子元素的外邊距折疊問題：
給父元素添加padding 或 border（破壞外邊距折疊條件）
<div class="f-block"></div>
<div style="background-color:red;border:1px solid black">
<div class="s-block"></div>
</div>
給父元素創(chuàng)建新的塊級格式化上下文（創(chuàng)建了新的塊級格式化上下文的塊元素赡鲜，不與它的子元素發(fā)生margin 折疊）
<div class="f-block"></div>
<div style="background-color:red;overflow:hidden">
<div class="s-block"></div>
</div>
2、清除浮動
<div class="container">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>
.container
{
width:550px;
border:5px solid red;
}
.item
{
width:100px;
height:100px;
float:left;
background-color:silver;
margin:5px;
}
對于上面的代碼庐船，我們希望得到這樣的結果：
但結果卻是這樣的：
原因是因為浮動元素脫離文檔流蝗蛙，container的高度無法被撐開。
清除浮動的方法及原理：
clear屬性：
clear屬性的意義就是禁止特定方向上存在浮動元素醉鳖，例如clear: left就是不允許元素左方存在文檔流之前浮動元素（注意捡硅，這里左邊如果存在文檔流之后的浮動元素是無法清理的）
根據(jù)CSS權威指南，具體的實現(xiàn)原理是通過引入清除區(qū)域盗棵，這個相當于加了一塊看不見的框把定義clear屬性的元素向下擠壮韭，直到元素指定方向剛好沒有浮動元素北发，這樣看起來包含框就把浮動框給包含了，實際上浮動框脫離文本流的性質沒變喷屋，它們依然是“浮”在上面的
用法：
1琳拨、容器內結尾處加空div標簽 clear:both
2、容器定義偽類:after 和 zoom(IE8以上和非IE瀏覽器才支持:after屯曹，原理和方法2有點類似狱庇，zoom(IE轉有屬性)可解決ie6,ie7浮動問題)
.container:after{display:block;clear:both;content:"";visibility:hidden;height:0}
.container{zoom:1}
容器形成新BFC：
計算BFC的高度時，浮動元素也參與計算
.container
{
width:550px;
border:5px solid red;
overfow:hidden;
}
或者使容器自身浮動也可以
消除浮動引起的文字環(huán)繞效果：
<div class="box">
<div class="img">image</div>
<div class="info">信息信息信息信息信息信息信息信息信息信息信息信信息信息信息信息信息信息信息信息信息信息信息信信息信息信息信息信息信息信息信息信息信息信息信信息信息信息信息信息信息信息信息信息信息信息信</div>
</div>
.box {width:210px;border: 1px solid #000;float: left;}
.img {width: 100px;height: 100px;background: #696;float: left;}
.info {background: #ccc;color: #fff;}
帶有浮動屬性的元素會脫離標準流進行排列布局恶耽，脫離標準流后的元素就不和塊元素相處在同一個流不居中密任，使得帶有浮動屬性的元素漂浮在正常塊元素上面。但是浮動的塊雖然脫離了正常的文檔流偷俭，但是依然占據(jù)正常文檔流的文本空間浪讳。于是在其后面寫的文本并不會被浮動元素所覆蓋而是繼續(xù)水平排列超出換行。
標準流中塊元素每個各占一行涌萤。內聯(lián)元素則是水平排列淹遵，直到一行排列不下進行換行操作。因為使用了float的元素占據(jù)文本空間负溪，使得后面的文本以除了浮動元素之外的空間為排列基準透揣，形成了文本環(huán)繞的效果。
清除環(huán)繞效果就是使info形成一個新的BFC（BFC的區(qū)域不會與float box重疊）川抡，添加overflow:hidden即可淌实。
注意：給info絕對定位也會形成一個新的BFC，但是info會按照絕對定位的規(guī)則進行布局猖腕，會與img重疊拆祈。
