在普通流中的盒子會參與一種格式上下文,這個盒子可能是塊盒也可能是行內盒,但不可能同時是塊盒又是行內盒。塊級盒參與塊級格式上下文(BFC),行內級盒參與行級格式上下文(IFC)。此章重點講BFC
BFC（Block Formatting Context）叫做“塊級格式化上下文”。BFC的布局規則如下：
1.內部的盒子會在垂直方向，一個個地放置；
2.盒子垂直方向的距離由margin決定，屬于同一個BFC的兩個相鄰Box的上下margin會發生重疊；
3.每個元素的左邊，與包含的盒子的左邊相接觸，即使存在浮動也是如此；
4.BFC的區域不會與float重疊；
5.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素，反之也如此；
6.計算BFC的高度時，浮動元素也參與計算。
哪些元素會產生BFC。
1.根元素；
2.float的屬性不為none；
3.position為absolute或fixed；
4.display為inline-block，table-cell，table-caption，flex；
5.overflow不為visible
那么舉一些常見的例子
1. 常見的左右布局，可以用float，可以用定位等方法
```
在用float的時候，右邊的div需要使用marginleft，如果不使用，則會與左邊浮動區域重合但是見上面的第四條，BFC區域不會與浮動區域重合，所以只要給右邊的div加上overflow:hidden就可以實現左右布局
```
2.子布局是浮動div，導致父布局的高度撐不開？
```
參照第六條，計算BFC高度，浮動元素也參與計算，所以只要加上overflow:hidden就可以讓父布局撐開
```
3.margin重疊
```
上下兩個div，margin重疊，怎么辦？
當然可以自己寫的時候注意
同屬于一個BFC盒子，則margin重疊，那么不同屬于一個BFC盒子尼？
所以讓下面的盒子外包一個盒子，加上overflow:hidden，則不塌陷
```
