什麼是BFC
BFC就是“塊級格式化上下文”的意思，創建了 BFC的元素就是一個獨立的盒子，不過只有Block-level box可以參與創建BFC， 它規定了內部的Block-level Box如何佈局，並且與這個獨立盒子裏的佈局不受外部影響，當然它也不會影響到外面的元素。
BFC有一下特性：
- 內部的Box會在垂直方向，從頂部開始一個接一個地放置。
- Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生疊加
- 每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
- BFC的區域不會與float box疊加。
- BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素，反之亦然。
- 計算BFC的高度時，浮動元素也參與計算。
如何觸發BFC
那麼我們該怎麼使用BFC呢，如何觸發BFC呢？：
- float 除了none以外的值
- overflow 除了visible 以外的值（hidden，auto，scroll ）
- display (table-cell，table-caption，inline-block, flex, inline-flex)
- position值爲（absolute，fixed）
- fieldset元素
- 絕對定位元素(position:absolute 或fixed)
- 行內塊inline-block(元素的display:inline-block)
- 表格單元格(元素的display:table-ceil,HTML表格默認屬性)
- 彈性盒flex boxes(元素地display:flex或inline-flex)
在以上的情況裏可以創建BFC。
哪些場景可以使用BFC
1.解決margin疊加問題
<head>
<title></title>
<style type="text/css">
p{
margin: 50px;
}
</style>
</head>
<body>
<p>hello world</p>
<p>hello world</p>
<p>hello world</p>
</body>
三P每個p之間的距離爲50px，發生了外邊距疊加。 要解決這個疊加問題即讓每個P之間是100px，我們可以新建一個BFC，怎麼建呢？可以給p元素添加一個父元素，讓它觸發BFC。如下:
<style type="text/css">
p {
margin: 50px;
}
.bfc{
/*position: absolute;*/
overflow: auto;
}
</style>
</head>
<body>
<div class="bfc">
<p>hello world</p>
</div>
<p>hello world</p>
<p>hello world</p>
</body>第一個盒子就和第二個盒子的邊距爲100px
不過雖然變成bfc，但是不同的方式也有所不同
.bfc{
position: absolute;
}
2.用於佈局
<style type="text/css">
body{
width: 300px;
position: relative;
}
.aside{
width: 100px;
height: 150px;
float:left;
background: blue;
}
.main{
height: 200px;
background: #f00;
}
</style>
</head>
<body>
<div class="aside"></div>
<div class="main"></div>這裏就會出現這種情況
從圖中我們會發現上面BFC的第三個特性，就是元素的左外邊距會觸碰到包含塊容器的做外邊框，就算存在浮動也會如此。（這裏不太理解）
看上面BFC第四個特性，就是BFC不會與浮動盒子疊加，那麼我們是不是可以創建一個新的BFC來解決這個問題呢？來看看：
.main {
height: 200px;
background: #f00;
overflow:hidden;
}就解決了上面的問題。發現我們用overflow:hidden觸發main元素的BFC之後，效果立馬出現了,
3.用於清除浮動，計算BFC高度.
因爲上面第六個特性提到計算BFC高度時，浮動元素也會參與計算，我們先看一個例子：
<head>
<title></title>
<style type="text/css">
.bfc{
border: 5px solid #f00;
width: 300px;
}
.box{
border: 5px solid blue;
width: 100px;
height: 100px;
float: left;
}
</style>
</head>
<body>
<div class="bfc">
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>其實我一看這個代碼，我就知道會出現bfc撐不起來的問題，因爲box設置了float，其實就相當於脫離了流，如果理解正常情況下一個html其實就是一層平地，我們往這裏面塞盒子。
先把float註釋掉來看效果：
/*float: left;*/bfc沒有設置高度，它的高度是因裝的東西而定的，如果就是瀏覽器默認的static，那麼box和bfc在一個平面，就相當於我們往地上扔了一個紙箱子，這個箱子的高度是可以伸縮的。我們再往裏面扔兩個盒子，這個箱子就擴充起來了。
float: left;一旦有了這句話就不一樣了，這個時候兩個盒子被放在了二樓，這個bfc箱子還在一樓，自然就是癟的了
要如何將這個bfc也放到二樓呢？
那就需要將它變爲bfc:就是上面提到的方式
overflow: hidden;
float: left;
position: absolute;
display: flex;都可以實現，因爲這樣它就變成了BFC和box並列了，都放到二樓去了。