BFC 是什么

BFC的全称是 “Block Formatting Context”，中文名称是 “块级格式化上下文”，具体的定义不太好定义，只能说 当一个元素有了BFC，它内部的所有元素都不会影响外部的元素
所以，它就有了附带的一些功能： 包裹浮动（效果跟清除浮动类似）、避免margin 穿透等

当一个元素有这些属性，就会触发BFC

1. float 的值不为none（float:left或float:right）
2. 根元素（html）或其他包含它的元素
3. 元素具有 position 为 absolute 或 fixed
4. display: inline-block 的元素
5. display:table-cell 的元素
6. dispaly:table-caption 的元素
7. 具有overflow并且值不为 visible 的块级元素
8. display:flow-root 的元素
9. column-span: all;

BFC会拿来做避免margin穿透的功能，因为被BFC包裹的元素内部不会影响外部

但是一般的属性都会造成另外的效果

比如float它会带来浮动，position:absolute会让元素脱离文档流

有一个一个元素专门是用来做成一个BFC的，就是display:flow-root ，这是一个css3
的属性，对浏览器的等级有要求。