1.在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
-
以下是 三种发生外边距合并的场景：
(1) 在普通文档流中,当两个兄弟元素的垂直外边距相遇时，会发生外边距合并。如下图所示。避免此种情况下外边距合并的方法：使元素BFC化。
(2) 如果一个盒子没有border-top或padding-top,那么它的上边距会和第一个子元素的上边距重叠,如下图所示.避免此种情况下外边距合并的方法：给父元素添加padding-top或border-top。
(3) 自身元素空间没有撑开时，发生自身外边距合并。
-
如何合并
margin值为都为正值时取最大值。
margin值为都为负数取绝对值最大值。
margin值一个为正数一个为负数取两者的和。
2.去除inline-block内缝隙有哪几种常见方法?
（1）去除inline-block元素标签间因空格回车产生的间隔
（2）父元素设置font-size:0
（3）给inline-block设置浮动
（4）使用负边距
3.父容器使用overflow: auto| hidden撑开高度的原理是什么？
使用over:auto/hidden后，父元素形成了一个独立的空间（BFC），不受外界外部干扰，从而能撑开高度。
4.BFC是什么？如何形成BFC，有什么作用?
- BFC即Block Formatting Context，他能提供一个环境，使元素在这个环境中按照一定规则进行布局。这个环境中的元素不会影响到其它环境中的布局，也不会受其他元素的影响。
- float的值不为none。
overflow的值不为visible。
display的值为table-cell, table-caption, inline-block中的任何一个。
position的值不为relative和static。 - 多栏布局、阻止外边距合并、清除浮动。
5.浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法？
浮动元素脱离文档流，让父元素感知不到内部有元素存在，从而会形成高度塌陷。
解决方法总体上分两种：
1.使父元素BFC化（包括设置float:left/right , overflow:auto/hidden, display:inline-block等）
2.在设置了浮动的子元素后插入设置了clear:both属性的空标签或伪元素
6.以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after{
content: ''; /*伪元素内容为空*/
display: block; /* 伪元素是block元素*/
clear: both; /* 两侧清除浮动*/
}
.clearfix{
*zoom: 1; /*为了兼容IE低版本，IE6/7不支持：after伪元素，zoom可触发IE的haslayout属性,类似于形成BFC清除浮动*/
}
