一海蔽、什么是FC、BFC
FC：格式化上下文（Formatting Context）扁位，其實指的是一個渲染區(qū)域准潭，擁有一套渲染規(guī)則，它決定了其子元素如何定位域仇，以及與其他元素之間的關系和相互作用刑然。
FC又分為BFC、IFC暇务、GFC與FFC泼掠，這里只講BFC。
BFC: 塊格式化上下文（Block Formatting Context垦细，BFC） 是Web頁面的可視化CSS渲染的一部分择镇，是塊盒子的布局過程發(fā)生的區(qū)域，也是浮動元素與其他元素交互的區(qū)域括改。 (出自MDN)
BFC用來生成一個隔離的空間腻豌、清除內(nèi)部元素的相互影響。
二、BFC的生成條件：
- 根元素或包含根元素的元素
- 浮動元素（元素的
float不是none） - 絕對定位元素（元素的
position為absolute或fixed） - 行內(nèi)塊元素（元素的
display為inline-block） - 表格單元格（元素的
display為table-cell吝梅，HTML表格單元格默認為該值） - 表格標題（元素的
display為table-caption虱疏，HTML表格標題默認為該值） - 匿名表格單元格元素（元素的
display為table、table-row苏携、table-row-group做瞪、table-header-group、table-footer-group（分別是HTML table右冻、row装蓬、tbody、thead纱扭、tfoot的默認屬性）或inline-table） -
overflow值不為visible的塊元素 -
display值為flow-root的元素 -
contain值為layout牍帚、content或strict的元素 - 彈性元素（
display為flex或inline-flex元素的直接子元素） - 網(wǎng)格元素（
display為grid或inline-grid元素的直接子元素） - 多列容器（元素的
column-count或column-width不為auto，包括 ``column-count為1） -
column-span為all的元素始終會創(chuàng)建一個新的BFC，即使該元素沒有包裹在一個多列容器中（標準變更，Chrome bug）嚷缭。
以上較為常見的有overflow:hidden蝶桶、float:left/right、position:absolute與display: flex爱榔。也就是說被环，當滿足上訴其中的一個或多個條件時，就代表了該元素已經(jīng)創(chuàng)建了一個BFC了详幽。
三筛欢、BFC的規(guī)范
- 內(nèi)部的盒子會在垂直方向，一個個地放置唇聘；
- 盒子垂直方向的距離由margin決定版姑，屬于同一個BFC的兩個相鄰Box的上下margin會發(fā)生重疊；
- 每個元素的左邊迟郎，與包含的盒子的左邊相接觸剥险，即使存在浮動也是如此；
- BFC的區(qū)域不會與float重疊宪肖；
- BFC就是頁面上的一個隔離的獨立容器表制，容器里面的子元素不會影響到外面的元素，反之也如此控乾；
- 計算BFC的高度時么介，浮動元素也參與計算。
四蜕衡、BFC可以用來干什么
1. 利用BFC避免外邊距折疊
??在CSS當中壤短，相鄰的兩個盒子（可能是兄弟關系也可能是祖先關系）的外邊距可以結合成一個單獨的外邊距。這種合并外邊距的方式被稱為折疊，并且因而所結合成的外邊距稱為折疊外邊距久脯。折疊遵循如下規(guī)則：
* 兩個相鄰的外邊距都是正數(shù)時纳胧，折疊結果是它們兩者之間較大的值。
* 兩個相鄰的外邊距都是負數(shù)時桶现，折疊結果是兩者絕對值的較大值躲雅。
* 兩個外邊距一正一負時，折疊結果是兩者的相加的和骡和。
舉個栗子：
??當兩個盒子處于同一個BFC時相赁，外邊距會發(fā)生重疊現(xiàn)象
.demo1, .demo2 {
height: 100px;
width: 100px;
background-color: red;
margin-top: 20px;
margin-bottom: 10px;
}
.demo2 {
background-color: lightblue;
}
<div class='box'>
<div class='demo1'></div>
<div class='demo2'></div>
</div>
解決方式：
??使兩者不處于同一個BFC中即可。
2. 防止發(fā)生因浮動而產(chǎn)生的高度塌陷問題
??當一個元素屬性為浮動時慰于，會脫離標準文檔流（也就是所謂的"脫標"）钮科，導致它的父元素計算高度時無法計算到浮動的元素。
舉個栗子：
??當父元素box不是BFC時婆赠，無法計算出浮動元素的高度绵脯，導致content(內(nèi)容)無法被撐開。
.box {
background-color: skyblue;
}
.demo1 {
height: 100px;
width: 100px;
background-color: rgba(0,0,0, 0.1);
float: left;
}
<div class='box'>
<div class='demo1'></div>
</div>
解決方式：
??根據(jù)上述的BFC規(guī)范的最后一點可以看出休里，可以通過生成BFC(方法參考上述的BFC生成條件蛆挫，這里使用display: flow-root作為栗子)來解決浮動時高度無法被計算的問題。
.box {
background-color: skyblue;
display: flow-root; //different妙黍，無副作用悴侵，適合在父元素使用
}
.demo1 {
height: 100px;
width: 100px;
background-color: rgba(0,0,0, 0.1);
float: left;
}
<div class='box'>
<div class='demo1'></div>
</div>
3. 解決浮動時元素重疊
??剛才上面有講到：浮動會產(chǎn)生‘脫標’。脫標會導致覆蓋標準文檔流的元素上拭嫁，因此會發(fā)生元素重疊的現(xiàn)象可免。
舉個栗子：
??當我們在一個元素中放置了一個浮動元素和一個普通元素時，浮動元素會被置于普通元素中做粤。
.demo1 {
height: 100px;
width: 100px;
float: left;
background-color: rgba(0, 0, 0, 0.1);
}
.demo2 {
height: 200px;
width: 200px;
background-color: skyblue;
}
<div class='box'>
<div class='demo1'></div>
<div class='demo2'></div>
</div>
解決辦法：
??由上面的規(guī)則（BFC的區(qū)域不會與float重疊）可得浇借，為非浮動元素建立一個BFC就可以避免此情況發(fā)生。
.demo1 {
height: 100px;
width: 100px;
float: left;
background-color: rgba(0, 0, 0, 0.1);
}
.demo2 {
height: 200px;
width: 200px;
background-color: skyblue;
overflow: auto;
}
<div class='box'>
<div class='demo1'></div>
<div class='demo2'></div>
</div>
