BFC（块级格式化上下文）

渲染规则

1.内部的box会在垂直方向，一个接一个的放置

2.box垂直方向的距离由margin决定，属于同一个bfc的两个相邻box的margin会发生重叠

3.每个元素的margin box的左边，与包含块border box的左边相接触（对于从做往右的格式化，否则相反）

4.bfc的区域不会与float box重叠

5.bfc就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也是如此

6.计算bfc的高度时，浮动的元素也参与计算

7.bfc的区域若没有设置固定的width、height，则会自动适应子元素的宽高

上下文

渲染的流程

文档解析成对象模型（dom），通过选择器给对应的元素加上样式，根据渲染规则渲染到显存区域

渲染过程中用到的数据通过上下文来获取

bfc

block formating context

渲染时用于保存临时数据和获取外部数据的容器

body是一个bfc（上下文，容器）

生成bfc

1.根元素

2.float属性不为none（脱离文档流）

3.position为absolute或fixed

4.display为inline-block,table-cell,table-caption,flex,inine-flex

5.overflow不为visible （hidden，auto，scroll）

bfc应用

1.自适应两栏布局 

2.清除内部浮动 

3.防止垂直margin重叠 

链接：http://download.youkuaiyun.com/detail/flqbestboy/9920617