1.对BFC规范(块级格式化上下文：block formatting context)的理解？

W3C CSS2.1规范中的一个概念,它是一个独立容器，决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。

一个页面是由很多个 Box 组成的，元素的类型和display属性，决定了这个Box的类型。

不同类型的Box，会参与不同的Formatting Context（决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染，也就是说BFC内部的元素和外部的元素不会互相影响。

2.css定义的权重

以下是权重的规则：标签的权重为1，class的权重为10，id的权重为100，以下例子是演示各种定义的权重值：

• /*权重为1*/                        div{}
• /*权重为10*/                      .class1{}
• /*权重为100*/                    #id1{}
• /*权重为100+1=101*/       #id1 div{}
• /*权重为10+1=11*/           .class1 div{}
• /*权重为10+10+1=21*/     .class1 .class2 div{}

如果权重相同，则最后定义的样式会起作用，但是应该避免这种情况出现。

3.为什么需要清除浮动？清除浮动的方式是？

清除浮动是为了清除使用浮动元素产生的影响。浮动的元素，高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示。

• 父级div定义height；
• 父级div 也一起浮动；
• 常规的使用一个class；

.clearfix::before, .clearfix::after {
    content: " ";
    display: table;
}
.clearfix::after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

• SASS编译的时候，浮动元素的父级div定义伪类:after

&::after,&::before{
    content: " ";
    visibility: hidden;
    display: block;
    height: 0;
    clear: both;
}

解析原理：

• display:block使生成的元素以块级元素显示，占满剩余空间；
• height:0避免生成内容破坏原有布局的高度；
• visibility:hidden使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互；
• 通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"."，有些版本可能content 里面内容为空，但是不推荐这样做的，firefox直到7.0 content:”" 仍然会产生额外的空隙；
• zoom：1 触发IE hasLayout。
  

4.什么是外边距合并？

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。

合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

附： CSS 外边距合并