inline-block、BFC、边距合并

一、在什么场景下会出现外边距合并？如何合并？如何不让相邻元素外边距合并？给个父子外边距合并的范例

块元素的top与bottom外边距某些情况下会合并，两个外边距合并成单个外边距，外边距大的一方将会覆盖外边距小的一方。

• 第一种情况：相邻元素
  当一个元素出现在另一个元素上面时，第一个元素的下外边距（bottom）与第二个的上外边距（top）合并。

Paste_Image.png

• 第二种情况：父子元素
  当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开），它们的上和/或下外边距也会发生合并。

Paste_Image.png

• 第三种情况：空元素（自身外边距合并）
  它有外边距，但是没有边框或填充。在这种情况下，上外边距就和下外边距合并到了一起。

Paste_Image.png

• 如何合并：
  1.两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
  上面的举例都为正数时。
  2.两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。

Paste_Image.png

3.两个外边距一正一负时，折叠结果是两者的相加的和。

Paste_Image.png

• 如何不让相邻元素外边距合并？
  1.父子元素，给父元素加上padding或者border。

Paste_Image.png

2.BFC
overflow属性的元素和它的子元素之间的margin之间的外边距不会发生合并

Paste_Image.png

Paste_Image.png

另外：
1.外边距合并只发生在垂直方向上，水平方向上是不会发生外边距合并的。

2.行内框、浮动框、绝对定位、display:inline-block的外边距不会发生合并。

二、去除inline-block内缝隙有哪几种常见方法?

有内缝隙的时候是这样子的：

Paste_Image.png

方法一：去除html内的空格
因为空格也属于一个字符串，也是占位置的。

Paste_Image.png

也可以这样写：

Paste_Image.png

方法二：负边距（不过第一个元素会溢出，需要单独设置）

Paste_Image.png

方法三：浮动（需要对父元素设置BfC，否则会塌陷）

Paste_Image.png

方法四：父元素设置font-size：0px（子元素要重置回来）

Paste_Image.png

三、父容器使用overflow: auto| hidden撑开高度的原理是什么？

关于overflow：
overflow 属性规定当内容溢出元素框时发生的事情。

Paste_Image.png

原理是：当元素浮动时，父元素感知不到浮动元素的存在，而且又没有设置height，就会造成塌陷。
使用overflow: auto| hidden可以形成一个独立的不受外界影响的空间——bfc。浮动元素也被包含在内，所以高度自然被撑开。

四、BFC是什么？如何形成BFC，有什么作用?

BFC全称为block formatting context，翻译过来就是块级格式化上下文。
通俗的理解是bfc会形成一个独立的，内部元素不受外界干扰的空间。

• 以下情况可以形成bfc：
  1.float的值不为none
  2.overflow的值不为visible
  3.display的值为inline-block、table-cell、table-caption
  4.position的值为absolute或fixed

• 作用：
  1.撑开父元素
  2.清除浮动
  3.防止外边距合并

五、浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法

浮动元素脱离了文档流，父容器感知不到它的存在，觉得里面什么东西都没有，而且父容器本身又没有设置高度，没有任何东西支撑，所以会高度塌陷。

此为父容器高度塌陷：

Paste_Image.png

解决方法：
1.bfc。使父容器形成bfc，包含住浮动元素。

Paste_Image.png

2.使父容器 float或display:inline-block；（父容器宽度会收缩，影响布局。）
3.在父容器中添加高度；
4.新建一个html空标签，并设置清除浮动clear:both;
5.使用伪类：after

Paste_Image.png

六、以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？

.clearfix:after{/*在clearfix后面添加元素*/
    content: '';/*这里元素的文本内容为空*/
    display: block;/*设置为块级元素*/
    clear: both;/*不允许有浮动*/
}
.clearfix{
    *zoom: 1;/*为了兼容ie*/
}

因为伪元素在IE8是部分支持，IE8以下不支持，所以*zoom: 1是为了在IE中到达清除浮动的效果。
bfc是一个独立的空间，不受外界元素干扰；而伪类是清楚浮动，让父容器感知元素的存在，从而撑开高度。