BFC的全称是 “Block Formatting Context”，中文名称是 “块级格式化上下文”，具体的定义不太好定义，只能说 当一个元素有了BFC，它内部的所有元素都不会影响外部的元素
所以，它就有了附带的一些功能： 包裹浮动（效果跟清除浮动类似）、避免margin 穿透等
当一个元素有这些属性，就会触发BFC
- float 的值不为none（float:left或float:right）
- 根元素（html）或其他包含它的元素
- 元素具有 position 为 absolute 或 fixed
- display: inline-block 的元素
- display:table-cell 的元素
- dispaly:table-caption 的元素
- 具有overflow并且值不为 visible 的块级元素
- display:flow-root 的元素
- column-span: all;
BFC会拿来做避免margin穿透的功能，因为被BFC包裹的元素内部不会影响外部
但是一般的属性都会造成另外的效果
比如float它会带来浮动，position:absolute会让元素脱离文档流
有一个一个元素专门是用来做成一个BFC的，就是display:flow-root ，这是一个css3
的属性，对浏览器的等级有要求。
