在普通流中的盒子會(huì)參與一種格式上下文,這個(gè)盒子可能是塊盒也可能是行內(nèi)盒,但不可能同時(shí)是塊盒又是行內(nèi)盒顺囊。塊級(jí)盒參與塊級(jí)格式上下文(BFC),行內(nèi)級(jí)盒參與行級(jí)格式上下文(IFC)丰滑。此章重點(diǎn)講BFC
BFC（Block Formatting Context）叫做“塊級(jí)格式化上下文”。BFC的布局規(guī)則如下：
1.內(nèi)部的盒子會(huì)在垂直方向，一個(gè)個(gè)地放置卡啰；
2.盒子垂直方向的距離由margin決定，屬于同一個(gè)BFC的兩個(gè)相鄰Box的上下margin會(huì)發(fā)生重疊；
3.每個(gè)元素的左邊惩阶，與包含的盒子的左邊相接觸，即使存在浮動(dòng)也是如此扣汪；
4.BFC的區(qū)域不會(huì)與float重疊断楷；
5.BFC就是頁面上的一個(gè)隔離的獨(dú)立容器，容器里面的子元素不會(huì)影響到外面的元素崭别，反之也如此冬筒；
6.計(jì)算BFC的高度時(shí)，浮動(dòng)元素也參與計(jì)算茅主。
哪些元素會(huì)產(chǎn)生BFC舞痰。
1.根元素；
2.float的屬性不為none诀姚；
3.position為absolute或fixed响牛；
4.display為inline-block，table-cell，table-caption呀打，flex矢赁；
5.overflow不為visible
那么舉一些常見的例子
1. 常見的左右布局，可以用float贬丛，可以用定位等方法
```
在用float的時(shí)候撩银，右邊的div需要使用marginleft，如果不使用瘫寝，則會(huì)與左邊浮動(dòng)區(qū)域重合但是見上面的第四條蜒蕾，BFC區(qū)域不會(huì)與浮動(dòng)區(qū)域重合，所以只要給右邊的div加上overflow:hidden就可以實(shí)現(xiàn)左右布局
```
2.子布局是浮動(dòng)div焕阿，導(dǎo)致父布局的高度撐不開咪啡？
```
參照第六條，計(jì)算BFC高度暮屡，浮動(dòng)元素也參與計(jì)算撤摸，所以只要加上overflow:hidden就可以讓父布局撐開
```
3.margin重疊
```
上下兩個(gè)div，margin重疊褒纲，怎么辦准夷？
當(dāng)然可以自己寫的時(shí)候注意
同屬于一個(gè)BFC盒子，則margin重疊莺掠，那么不同屬于一個(gè)BFC盒子尼衫嵌？
所以讓下面的盒子外包一個(gè)盒子，加上overflow:hidden彻秆，則不塌陷
```
