晓：创造黎明为己任！
1，在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
- 两个块级元素垂直外边距相遇时，将形成一个外边距。合并后的外边距将等于两个块级元素外边距高度的最大者。
- 不让相邻的外边距合并，举例如下：
只需要将每一个元素都加BFC即可。
- 不让父子外边距合并，举例如下：
只需要给子元素加边框、内边距即可。 - 如果没有元素，margin自身都会合并。
2，去除inline-block内缝隙有哪几种常见方法?
具体情况如下：
- 方法一：将元素前的空格去掉，举例如下：
- 方法二：为了避免元素太长不容易看，可以采用这种方式：
方法三：负margin法。举例如下：
可以看到这里有一个问题，当设置margin：-4px时，元素之间的缝隙不见了，但是第一个元素出了边界。解决方法就是：
- 方法四：浮动。举例如下：
但是这里出现了问题：父容器（边框）无法包裹浮动元素。解决方法就是使用清除浮动
overflow:auto，举例如下：
- 方法五：给边框设置
font-size:0最简单的方法，经验得来。举例如下：
因为边框的font-size为零，但是li设置字体大小，对字本身没有影响。
3，父容器使用overflow: auto| hidden撑开高度的原理是什么？
- 相当于创建了一个独立的空间。overflow: auto| hidden使父容器形成BFC，从而清除浮动。原理是根据BFC的特性之一：计算一个BFC的高度时，其内部浮动元素的高度也会参与计算。
4，BFC是什么？如何形成BFC，有什么作用?
- BFC（Block formatting context）直译为”块级格式化上下文”。
- 如何形成BFC:
- float属性不为none
- position为absolute
- display为inline-block, table-cell, table-caption, flex, inline-flex
- overflow不为visible
- 页面渲染BFC时会将所有元素都计算在内包括绝对定位和浮动元素，阻止浮动导致父元素塌陷。
5，浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法?
- 当元素浮动时，会脱离页面，是的父元素看不到该元素，导致父容器不能讲元素包括在内，出现塌陷。
- 解决方法：
- 父元素上加BFC；
- 清除浮动clear:both；
- 父元素设置高度。
6，以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after：给父元素添加伪类；
content:""：添加一行空文本；
display:block：让添加的文本变成块级元素；
clear:both：清楚此元素的两边浮动；
*zoom:1：以上是IE8以后的属性，这个是为了之前不支持次属性的浏览器。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。
- 这几行代码是清除浮动，利用伪类after在最下面添加一个块级元素，使得父元素能包裹起来，达到清除浮动的效果。BFC是包含浮动，自身形成一个独立的空间。
