可見BFC並不是網頁默認的格式化上下文
BFC的佈局規則：
1.內部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊
3.每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對於從左往右的格式化，否則相反)。即使存在浮動也是如此。
4.BFC的區域不會與float box重疊。
5.BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。反之也如此。
6.計算BFC的高度時，浮動元素也參與計算
BFC作用
1.自適應兩欄佈局，即同一個BFC下外邊距margin會發生摺疊，如果爲了避免這個重疊，則將其放在不同的BFC容器中
2.可以阻止元素被浮動元素覆蓋，如果兩個div，若其中一個使用了float：left，則會將另外一個盒子的部分進行覆蓋，這時將另外一個盒子也觸發BFC，則能有效避免這種情況。
3.可以包含浮動元素–清除內部浮動，即如果使用浮動，元素會脫離文檔流，則外部元素如div的寬度會減去這部分元素的寬度，如果觸發BFC，則該容器仍會包裹浮動元素
