在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？
首先，外边距的合并出现在垂直方向上，两个块级元素垂直外边距相邻时，两者的原外边距会合并成一个高度等于两者中较大的新外边距。
在正常的文档流下，没有边框，没有padding，但有外边距时，上下的margin会出现合并，高度等于两者中的较大者。
不让相邻元素外边距合并的方法：
- 加外边框，加padding；
- 父元素加overflow（不为visible）;
- 父元素加display:inline-block;
- 父元素加float;
父容器使用overflow: auto| hidden撑开高度的原理是什么？
overflow：auto|hidden会触发BFC，由于BFC可以包含浮动，故可以感知浮动元素的高度，所以可以撑开高度。
BFC是什么？如何形成BFC，有什么作用?
BFC（块级元素格式上下文）形成了一个独立的空间，空间内部不受外部元素影响。
如何形成BFC：
1.根元素
2.display：inline-block|table-cell|table-caption|flex|inline-flex;
3.position:absolute|fixed;
4.overflow:auto|hidden|scroll;
5.float:right|left|both;
有什么作用？
1.可以清除浮动，包含浮动元素；
2.不被浮动元素覆盖；
3.阻止外边距折叠。
浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
由于浮动脱离文档流，浮动元素不会影响父元素的宽度，使父元素的高度为“0”，从而形成高度塌陷。
一般有两种解决办法：
1.用clear清除浮动；
2.使父容器形成BFC。
以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1;
}
作用：清除浮动
给类选择器clearfix的元素添加一个伪类after，添加内容为空的块级元素，清除两边的浮动。
*zoom用来触发IE浏览器下的hasLayout，解决浏览器不兼容问题。
和BFC的区别：
通过伪类清除浮动元素，并不是父元素感觉到了子元素中的浮动元素，而是在后面添加了一个块级元素。而元素形成BFC，是因为元素感觉到了子元素中浮动元素的宽度，而不是通过添加元素撑开父元素。