关于BFC,外边距合并，浏览器兼容

BFC

BFC是什么

MDN链接:
https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context

我的理解（不重要）

我理解block formatting context为一个属性，会将它的所有子孙元素（除了子孙元素同样为BFC的子孙元素）包裹自身块的边框以内。

生成BFC

许多属性都将会生成BFC，比如说float元素，display为inline-block，position为fixed或absolute。这些属性在生成BFC同时附带其他属性，所以并不推荐单纯为了生成BFC而使用这些属性。最新有display: flow-root是单纯生成BFC，但浏览器兼容性不太好，只兼容Firefox，Chrome，Opera。

用处

• 要将块内的内容包裹起来。 demo
• 将普通水平与浮动元素水平区分开。demo

外边距合并

发生情况

• 相邻元素之间边距
• 空的块级元素自身的上下外边距
• 父元素与第一个子元素上边距合并，与最后一个资源下边距合并。

计算

• 合并时如果两外边距值皆为正，则取最大值为边距。
• 如果两外边距值皆为负，则取绝对值较大值为边距。
• 如果两外边距值一正一负，则取两值之和为边。

浏览器兼容

缘由

由于浏览器版本不同，支持的功能也不同，导致页面的兼容性问题。

解决方法与工具

• IE可通过条件注释识别语句（IE10以后不支持）范例：

• html5shiv: 用来让IE9版本以下浏览器识别支持HTML5样式的变通方案。
• respond.js 用来让IE6-8以及其他低版本浏览器支持CSS3 Media Query的变通方案。
• normailize.css 是一些增加CSS的兼容性CSS的声明。
• Modernizr 可对浏览器进行特性检测，方便开发时对各种特性进行声明，以解决兼容性问题。
• postCSS 一款对CSS进行处理的工具，依赖插件进行操作。出现兼容性问题可使用其插件进行回退。