BFC的概念和解決外邊距合並
BFC的概念
什麽是BFC呢？
BFC：塊級格式化上下文（Block Formatting Content）是Web頁面的可視化CSS渲染的一部分，是布局過程中生成塊級盒子的區域，也是浮動元素與其他元素的交互限定區域。
在BFC中，盒子從頂端開始垂直地一個接一個地排列，兩個盒子之間的垂直的間隙是由他們的margin 值所決定的。在一個BFC中，兩個相鄰的塊級盒子的垂直外邊距會產生折疊。
在BFC中，每一個盒子的左外邊緣（margin-left）會觸碰到容器的左邊緣(border-left)（對於從右到左的格式來說，則觸碰到右邊緣）。
簡而言之，可以把BFC理解成一個箱子，箱子內部的元素如何擺放都不會影響外部。
產生BFC
- 根元素(html)
- float的值不為none
- position的值為absolute和fixed
- display的值為table-cell、table-caption、flex、inline-flex
- overflow的值部位visible
只要滿足以上條件之一就能觸發BFC
BFC的具體應用
1.在同一個BFC下會發生外邊距合並
這裏先說下外邊距合並，外邊距合並一般有3種情況
第一種，當兩個元素垂直排列時，第一個元素的下外邊距與第二個元素的上外邊距會發生合並。
第二種，當一個元素包含在另一個元素中時（假設沒有內邊距或邊框把外邊距分隔開），它們的上和/或下外邊距也會發生合並。
第三種，假設有一個空元素，它有外邊距，但是沒有邊框或填充。在這種情況下，上外邊距與下外邊距就碰到了一起，它們會發生合並。
要解決外邊距合並的問題，可以將它們放置在不同的BFC容器中，例如：
<div>
<p></p>
</div>
<div>
<p></p>
</div>
div{
overflow:hidden;
}
p{
width:100px;
height:100px;
background-color:#333;
margin:50px;
}
這樣原本外邊距合並的兩個元素，將其產生BFC後外邊距就不會合並了。
2.BFC可以清除浮動
一個元素包含了一個浮動元素，我們知道浮動元素脫離了標準文檔流，所以父元素的高度會坍塌，但是只要觸發生成了BFC，那父元素就會包裹住浮動元素，舉個例子：
<div style="border:1px solid #111;overflow:hidden">
<div style="float:left;height:200px;width:200px;">
</div>
</div>
3.可以處理文字環繞效果
舉個例子：
<div class="left" style="width:100px;height:100px;background-color:red;float:left"></div> <p style="width:500px;height:150px;background-color:blue;">我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本我是文本</p>
效果：
可以看到，文本所在的元素藍色背景占據了一行，因為背景為紅色的元素是浮動元素，所以脫離了標準文檔流，而文本圍繞著紅色元素，這不是我們想要的效果，這時可以給第二個元素觸發BFC將它們區分開來：
總結：雖然可以用BFC解決以上問題，但是要添加觸發BFC的屬性這會給元素帶了一些副作用，我們要根據情況斟酌選擇合適的屬性來解決我們的問題
BFC的概念和解決外邊距合並