-
在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例。
答:
外边距会合并场景：-
两个块级元素上下外边距相邻，上下两个元素中间为最大一方的外边距。1号的下边距会和2号上边距合并
Paste_Image.png -
当父元素没有设置边框或padding属性，或父元素没有形成BFC的话，父子元素合并边距。
Paste_Image.png
Paste_Image.png
如果不想合并，可以给两个元素加上边界，比如边框，padding，或者使用Inline-block,float。
如何合并：
margin值为都为正值时取最大值。
margin值为都为负数取绝对值最大值。
margin值一个为正数一个为负数取两者的和。 -
- 去除inline-block内缝隙有哪几种常见方法?
答：-
把元素写在一行，即没有空行。元素多可能不好整理！
Paste_Image.png -
margin-left: -4px;一般-4px。
Paste_Image.png -
浮动，需要在父容器内加上，
overflow:auto;
Paste_Image.png -
父容器
font-size:0;
Paste_Image.png
-
父容器使用overflow: auto| hidden撑开高度的原理是什么？
答：使用overfl:auto或hidden会形成BFC，在BFC中，，浮动元素一样是参与计算的，所以就撑开了高度。相当于清除浮动。-
BFC是什么？如何形成BFC，有什么作用?
答：- BFC:BFC既Block Formatting Context，他能提供一个环境，使元素在这个环境中按照一定规则进行布局。这个环境中的元素不会影响到其它环境中的布局，也不会受其他元素的影响。
- 如何形成：
display:inline-block | table-cell | table-caption;、overflow:hidden | auto;、float不为none;均可形成BFC 。 - BFC作用：清除浮动元素对外部元素的影响、阻止元素外边距合并。
-
浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法。
答：
浮动元素会脱离文档流，父元素不知他的存在。所以就出现塌陷。
解决方法：- 内部行程BFC。
- 清除浮动。
- 设置zoom：1; (该方法是为了兼容ie6、7)
-
以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
答：
.clearfix:after{ /设置伪类/
content:""; /内容为空/
display: block; /成为块级元素/
clear: both; /清除两侧浮动/
}
.clearfix{ /class选择器/
zoom: 1; /兼容 ie6,7*/
}
作用：清除浮动元素。
产生作用：父元素的高度是由它里面所有的文档流的高度决定，而这个空的元素左右都不能有浮动元素，clear属性只能影响使用清除的元素本身，不能影响其他元素，所以这个空元素就会在在浮动元素下方，最后父元素要包住这个空元素，只能被撑开。
区别：BFC是创建了一个独立的空间，在计算高度时将浮动元素一起计算进去，伪元素清除浮动是给父元素内添加一个空元素而撑开父容器。