我對BFC的理解
對css有了解的朋友肯定知道盒式模型這個概念，對一個元素設置css，首先需要知道這個元素是block還是inline類型。而BFC就是用來格式化快級盒子。
BFC:塊級格式化上下文，它是指一個獨立的塊級渲染區域，只有Block-level Box 參與，該區域擁有一套渲染規則來約束塊級盒子的佈局，且與區域外部無關
BFC的生成
既然上文提到BFC是一塊渲染區域，那這塊渲染區域到底在哪，它又是有多大。這些由生成BFC的元素決定，css2.1中規定滿足下列css聲明之一的元素便會生成BFC
- float的值不爲none；
- overflow的值不爲visible
- dispalay的值爲inline-block，table-cell，tabl
- e-caption
- position的值爲absolute或fixe
- 有人認爲table也可以生成BFC其實這裏的主要原因是table會默認生成一個匿名的table-cell，正是這個匿名的table-cell生成了BFC
BFC的約束規則
生成BFC元素的子元素會一個接一個的放置。垂直方向上他們的起點是一個包含塊的頂部，兩個相鄰子元素之間垂直距離取決於元素的margin特性。在BFC中相鄰的塊級元素外邊距會摺疊。
生成BFC元素的子元素，每一個子元素的外邊距和包含塊的左邊界相接觸，（對於從右到左的格式化，右外邊距和右邊界相接觸），除非這個子元素也創建了一個新的BFC（如它自身也是一個浮動元素）。
清除浮動
1.浮動也跟着浮動
2.浮動用overflow來包裹起來
3.在後面添加一個空的div，爲其設置樣式 clear：both
4.比較通用的辦法，添加clearfix
.clearfix:after{ content: "."; width: 0; height: 0; visibility: hidden; display: block; clear: both; overflow: hidden; }
5.改進一下clearfix樣式，可以防止margin的疊加
.clearfix:before, .clearfix.after{ content: ""; display: table; } .clearfix:after{ clear: both; }