什麼是BFC？
BFC全稱為塊級格式化上下文，它實際上就是一種css布局規則，它規定了元素内部如何布局，而且内部布局不會對外部産生任何影響，即當一個塊級元素觸發了BFC，那麼這個塊級元素就會有相應的規則。
那麼，觸發了BFC後，會發生什麼big news呢？
big news：
1. BFC内部的塊盒和行盒（行盒就是接連排列的内聯元素）元素會在垂直方向接連排列
- 同一個BFC内部的兩個相鄰元素的上下margin會發生重疊
- 每個元素的最左邊，與包含塊border的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此
- BFC的區域不會與float 元素重疊
- BFC就是頁面上的一個隔離的獨立容器，容器裡面的子元素不會影響到外面的元素
- 計算BFC的高度時，浮動元素也參與計算
我們知道了觸發BFC後會産生的規則，那麼又如何區觸發BFC呢？
方法如下：
1. float的值不是none
- position的值不是static或者relative
- display的值是inline-block、table-cell、flex、table-caption或者inline-flex
- overflow的值不是visible,
我們知道了BFC的規則和觸發它的條件，下面舉幾個代碼例子證明（下面的例子都使用overflow:hidden觸發BFC）：
一、我們都知道，當兩個相鄰塊級元素都擁有margin-top和margin-bottom，他們的上下margin會發生重疊。
<style>
#BFC
{
overflow:hidden;
}
#up,#down
{
height: 50px;
width: 300px;
background: #666;
margin:15px;
}
</style>
<body>
<div id='BFC'>
<div id="up"></div>
<div id="down"></div>
</div>
</body>
效果如下：
如果我們想讓它們的margin不産生重疊呢？ 解決方法：我們可以通過把其中的一個div處在另外一個BFC下就可以了。
<style>
#BFC,#otherBFC
{
overflow:hidden;
}
#up,#down
{
height: 50px;
width: 300px;
background: #666;
margin:15px;
}
</style>
<body>
<div id='BFC'>
<div id="up"></div>
<div id="otherBFC">
<div id="down"></div>
</div>
</div>
</body>
效果如下：
二、BFC的區域不會與float box重疊
當沒有觸發BFC時：
<style>
#float
{
float: left;
height: 100px;
width: 100px;
background: #666;
opacity: 0.5;/*用于檢視元素疊加部分*/
}
#cont
{
height: 50px;
width: 300px;
background: orange;
}
</style>
<body>
<div id="float"></div>
<div id="cont"></div>
</body>
效果如下：
觸發BFC後（在原有代碼基礎上添加overflow）：
#cont
{
height: 50px;
width: 300px;
background: orange;
overflow:hidden;/*觸發BFC*/
}
效果如下：
三、計算BFC的高度時，浮動元素也參與計算，這是解決浮動塌陷的一種方法
當沒有觸發BFC的情況下，内部元素浮動會引起外部元素塌陷：
<style>
#outer
{
border: 5px solid orange;
}
#inner
{
float: left;
height: 50px;
width: 300px;
background: #666;
}
</style>
<body>
<div id="outer">
<div id="inner"></div>
</div>
</body>
效果如下：
觸發BFC，解決塌陷問題：
#outer
{
border: 5px solid orange;
overflow:hidden;
} 效果如下：
參考了各位大神的資料，終于對BFC有了一點了解，也明白了網上的clearfix浮動清除法為何需要添加一些額外的css屬性，以前隻會copy，現在也明白了一些原理。寫下這些筆記，是為了能夠牢記，也為了能夠分享自己的收獲，如果有錯誤，請多多指教，新手一枚。
學習借鑒的大神文章：
http://www.cnblogs.com/chencyl/p/3948331.html
http://www.cnblogs.com/libin-1/p/7098468.html