什么是BFC
BFC是什么並不重要。重要的是開啟它干嘛？以及如何開啟它
根據W3C的標准，在頁面中元素都一個隱含的屬性叫做Block Formatting Context（塊級 格式化 環境）簡稱BFC
開啟元素的BFC后，元素會有如下特性：
1.父元素的垂直外邊距不會和子元素重疊。
2.開啟BFC的元素不會被浮動的元素所覆蓋。
3.開啟BFC的元素可以包含浮動的子元素。
在以下情況下,會自動開啟BFC:
1.設置元素浮動(此方法，雖然可以撐開父元素，但是會導致父元素的寬度丟失,也會導致下邊的元素上移)
2.設置元素絕對定位
3.設置元素display:inline-block;(此方法雖然也可以解決問題,但是轉為行內塊也會導致寬度丟失,因此也不推薦此方法)
4.將元素的overflow設置為一個非visible的值(推薦方式:overflow:hidden;是副作用最小的開啟BFC方式)
注:ie6不支持BFC,如果要同時兼容ie6 可以加一個屬性 zoom:1;即可(zoom表示放大,寫幾就是放大幾倍,此屬性僅支持IE,且IE8以下)