1.BFC的含义：
BFC称块级元素格式化上下文，是一个独立的渲染区域，只有块级元素（父元素和子元素都是块级元素）参与，它规定了内部块级元素如何布局，并且与这个区域外部毫不相干；
2.BFC的触发条件：
1）.根元素（html）;
2）.float属性不为none；
3）.display属性为table-cell table-caption及inline-block;
4）.overflow属性不为visible;
5）.position属性为absolute及fixed之一；
3.BFC布局规则
1）.浮动的元素会被父级计算高度（父级添加overflow:hidden触发了BFC）
2）.非浮动元素不会覆盖浮动元素位置（非浮动元素加overflow：hidden触发了BFC，display：inline-block）
3）.margin不会传递给父级（给父级添加overflow：hidden或者添加float父级触发了BFC）
4）.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后给他的父级添加overflow：hidden触发BFC，给其中的一个子元素添加display：inline-block）
4.自适应两栏布局及圣杯布局(非浮动元素添加overflow:hidden,触发BFC)代码：
5.常见bug修复：
（1）高度坍塌：
hack1：给父元素添加声明overflow:hidden;(触发一个BFC)
hack2:在浮动元素下方添加空div,并给该元素添加声明
：div{clear:both; height:0; overflow:hidden;}
hack3:万能清除浮动法选择符
:after{content:".";clear:both;display:block;height:0;overflow:hidden;visibility:hidden;}
（2）图片三像素：
hack1:将与写在一行上；
hack2:将转为块状元素，给添加声明：display:block;
hack3:给图片添加verticle-align:top/middle/bottom;
（3）margin上下重叠
当前元素(父元素里面第一个子元素)与父元素没有设置任何浮动的情况下，设置margin-top后，会错误的把margin-top加在父级元素上，
hack:1、给父级元素添加overflow:hidden;(推荐使用) ;
hack2、给父元素或者子元素加浮动;
（4） 双倍浮向（双倍边距）（只有IE6出现）
描述：当Ie6及更低版本浏览器在解析浮动元素时，会错误地把浮向边边界（margin）加倍显示。
hack:给浮动元素添加声明：display:inline;
（5）默认高度（IE6、IE7）
描述：在IE6及以下版本中，部分块元素拥有默认高度（在16px左右；）
hack1:给元素添加声明：font-size:0;
hack2：给元素添加声明：overflow:hidden;
（6）表单元素行高对齐不一致
描述：表单元素行高对齐方式不一致
hack:给表单元素添加声明：float:left;
（7）按钮元素默认大小不一
描述：各浏览器中按钮元素大小不一致
hack1： 统一大小/（用a标记模拟）
hack2:input外边套一个标签，在这个标签里写按钮的样式，把input的边框去掉。
hack3:如果这个按钮是一个图片，直接把图片作为按钮的背景图即可。
（8）百分比bug
描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况。 （也会受系统影响）
hack: 给右面的浮动元素添加声明：
clear:right; 意思：清除右浮动。
clear:left:清除左浮动
clear:both:清除两边的浮动
（9）鼠标指针bug
描述：cursor属性的hand属性值只有IE9以下浏览器识别，其它浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上版本及其它内核浏览器都识别该声明。
hack: 如统一某元素鼠标指针形状为手型，
应添加声明：cursor:pointer
（10）透明属性
兼容其他浏览器写法：opacity:value;(value的取值范围0-1; 例：opacity:0.5; )
IE浏览器写法：filter:alpha(opacity=value);取值范围 1-100(整数)
（11）li列表的BUG
1）：当父元素(li) 有float:left;子元素(a) 没设置浮动的情况下会出现垂直bug；
Hack:给父元素li和子元素a都设置浮动；
2）：当给li中的a转成block；并且有height,并有float的，li中没设置浮动会出现阶梯显示，
hack：同时给li加float;
（12）margin BUG
当两个上下排列的元素，上元素有margin-bottom：30px；下面元素有margin-top:20px；他们中间的距离不会叠加，而是会设置为较大的值；
