一、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例
1、外边距和并的含义①②③④⑤⑥
①外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。
②合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
注意：
①只有普通文档流中块框的垂直外边距才会发生外边距合并。
②行内框、浮动框、绝对定位之间的外边距不会合并。
2、外边距合并主要有三种情况：
①相邻兄弟元素之间外边距合并
②父子元素的外边距合并(如果父元素没有设置border，padding、没有内容)
③自身的外边距合并(自己没有内容，没有border和padding)
3、外边距合并的方式：
① 当两个外边距都是正数时，取两者之中的较大者
②当两个外边距都是负数时，取两者之间绝对值较大者
③当两个外边距一正一负时，取的是两者的和
4、举例说明：
①父子关系的合并
Paste_Image.png
Paste_Image.png
父元素的外边距和子元素的外边距合并为40px，并不是它们的外边距之和。
如何去除父子关系外边距合并?
根据盒模型的原理，父子关系的外边距合并是因为它们之间没有分界线。可以给父元素添加边框、内边距、内容当做分界线和让父元素形成bfc，这样就不会发生边距合并。
②相邻兄弟关系的合并
设置浮动，display：inline-block或使其父元素均形成BFC可防止边距合并（如overflow:hidden）
③自身外边距合并；
假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，上外边距与下外边距就碰到了一起，它们会发生合并：
Paste_Image.png
如果这个外边距遇到另一个元素的外边距，它还会发生合并：
Paste_Image.png
这就是一系列的段落元素占用空间非常小的原因，因为它们的所有外边距都合并到一起，形成了一个小的外边距。
Paste_Image.png
如何去除自身外边距的合并
可以给这个元素添加添加边框、内边距、设置overflow：auto形成bfc。
5、不产生外边距合并的情况
①浮动元素不与任何元素产生外边距合并
Paste_Image.png
②父子关系、兄弟关系，设置inline-block元素不合并
Paste_Image.png
③创建BFC与子元素不合并
子元素设置overflow: hidden;也可以形成BFC，但是没有达到效果，外边距还是会合并。两者的外边距没有隔离开来。
Paste_Image.png
给子元素添加父元素div，div设置overflow:hidden，外边距不合并
Paste_Image.png
④使用绝对定位的元素，不与任何元素发生外边距合并
Paste_Image.png
⑤根元素不合并
总结：
①不仅仅相邻元素外边距会合并，有时候不相邻的元素外边距也可能合并。
②两个元素外边距会不会合并主要看它们外边距之间有没有分界线存在。
③所以不让两个元素的外边距合并，就要让它们之间有道分界线，这个分界线可以是border，padding、bfc形成的独立空间。
二、去除inline-block内缝隙有哪几种常见方法?
原理:浏览器bug将inline-block元素标签之间的缝隙视作文本
Paste_Image.png
1、html内标签不含空格
也可以这样写，标签可以换行，但是要保证标签相接的地方没有空格
2、使用负margin
Paste_Image.png
3、使用浮动
Paste_Image.png
4、使用父元素font-size
Paste_Image.png
注意：父元素设置font-size为0，子元素要重新设置字体大小。
三、父容器使用overflow: auto| hidden撑开高度的原理是什么？
这样设置形成BFC，BFC是一个独立的空间，使其内部元素不受外界的影响，因此会撑开父容器的高度。
BFC有三个特性：
- BFC会阻止垂直外边距（margin-top、margin-bottom）折叠
- BFC不会重叠浮动元素
- BFC可以包含浮动
根据第三条特性就可以知道，父容器的高度可以被撑开。
四、BFC是什么？如何形成BFC，有什么作用?
**1.BFC是block formatting contexts，块级格式上下文。 **
W3C对BFC的定义如下：
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）
一个HTML元素要创建BFC，则满足下列的任意一个或多个条件即可：
1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible
BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的，同时也不影响外界的元素。
BFC就是一个独立的空间，内部的元素不受外界的影响。
2、BFC的布局规矩：
①内部box在垂直方向，一个接一个的放置;
②box的垂直间隙由margin决定，属于同一个BFC的两个box间的margin会重叠
③BFC区域不会与float box重叠（可用于排版）；
④BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。
⑤计算BFC的高度时，浮动元素也参与计算
3、如何创建BFC
①根元素html
②float为 left|right
③overflow为 hidden|auto|scroll
④display为 table-cell|table-caption|inline-block
⑤position为 absolute|fixed
** 4、作用**
- 清除浮动
- 防止外边距合并
- 设计布局
五、浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法？
1、子元素设置浮动后，就脱离了文档流，父元素就感知不到浮动元素的存在，浮动元素会溢出父元素，而父容器就会高度塌陷。
2、解决父容器塌陷的方法：
①给父级设置伪类:after，使用clear属性
②父级overflow：auto,overflow：hidden,float:left,display:inline-block 形成bfc。优点是可以很少CSS代码即可解决浮动产生。如果将父级元素也设置浮动，会使其整体浮动，影响布局，不推荐使用。
六、以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？
.clearfix:after{//在父容器上添加类clearfix，使用该类的伪类:after
content: '';//伪元素的内容是空的
display: block; //伪元素生成的默认为行内元素，而clear对象一定是块级元素,让该元素成为块级元素，占据一整行
clear: both;//清除块级元素左右的浮动
}
.clearfix{
*zoom: 1;//支持IE浏览器,触发IE hasLayout 属性
}
区别：是BFC形成一个内部的独立空间，内部元素的布局不受外部元素的影响，而上面的方法是通过利用父元素感知块级元素的存在把自己的空间撑开，并没有形成独立的空间。
