inline-block、BFC、边距合并

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

Reference:w3边距合并解释
在文档流中，块级元素会从上往下依次挨着排列，此时前一个块级元素的margin-bottom会与后一个块级元素的margin-top合并。例如：




  
  JS Bin





  
  JS Bin

output

可以看出，尽管绿盒的margin-top为20px，红盒的margin-bottom为20px，但此时中间间隙并非40px,而是合并为20px。若设置绿盒 margin:10px 20px;;则中间缝隙依旧为20px，故外边距合并最终留存的结果是两者外边距较大的那一个。

output

总结规则如下：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
两个外边距一正一负时，折叠结果是两者的相加的和。

若要让外边距不发生合并，从根本上来说是需要让两个元素处于不同的BFC中，即让其中一个元素处在一个新的BFC中；
生成BFC的规则：

根元素

float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

由于float与position:absolute/fixed会改变文档流，所以我们一般考虑添加一个父级元素，给其添加overflow:hidden/auto;或display:inline-block;来生成新的BFC。

父子外边距合并例子

如下图所示，父子的margin均为20px,显然父子上下外边距重合，发生合并。

父子外边距合并

消除方法：

给父元素增加一个不为0填充(border,paddding均可);
给父级元素增加overflow:hidden/auto;。

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

不换行，缝隙出现的本质原因是在于换行所出现的一个空格符号，所以不换行能够解决问题，但是代码不规整；
使用浮动float：left 父元素需要用overflow：auto或者hidden撑开。
给父元素font-size设为0，需要在自己在inline-block设置一下字体大小。

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

当子元素全部float脱离文档流之后，父容器可视为内部没有任何子元素而塌陷，overflow值为auto| hidden时可以闭合元素修复高度坍塌，清除浮动。

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

Reference：前端精选文摘：BFC 神奇背后的原理
其实第一题已经详细解答了如何形成BFC和BFC的作用，现只列出何为BFC：

BFC 定义
　　BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC布局规则：
内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算。

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

当子元素全部float脱离文档流之后，父容器可视为内部没有任何子元素而塌陷。
解决方法：

给父元素添加display: inline-block; overflow: auto; 或 overflow: hidden;样式，使父容器形成BFC空间。
使用伪类选择器after 给父元素最后加上子元素并且具有clear：both属性，也可以清除浮动。

.clearfix:after{ content:''; display:block; clear:both; }

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

.clearfix:after{ content: '';    /*添加一个空字符*/
             display: block;       /*变为块级元素*/
             clear: both;           /*清除浮动*/
             }
 .clearfix{
            *zoom: 1;             /*为了兼容IE6\7*/
}

在浮动元素后添加一个没有内容（实际上有一个空字符）的块级元素，当其清除浮动后，所在位置正好是所有浮动元素的最下面，自然由其撑起的父级元素能够包裹住所有的子元素。
与BFC的区别：
BFC撑开空间是使父元素本身形成一个独立空间来包容浮动元素，而这个方法是使用内容将父容器撑开。