CSS inline-block、BFC、边距合并

在什么场景下会出现外边距合并？如何合并？

相邻的块元素之间其外边距会发生合并现象。合并后的外边距大小等同于两个块状元素中设置较大外边距一方的外边距值。

如何不让相邻元素外边距合并？

• 同级元素:
• 浮动,绝对定位,inline-block
• 用父元素包裹这些元素,父容器之间再用BFC或者border,padding来隔离
• 父子元素:给父元素加border或者padding来隔离父子元素,使之不产生合并。

同级元素外边距合并.png

同级元素外边距不合并.png

父子元素外边距合并.png

父子元素外边距不合并.png

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

• 在html中
• 把元素写在一行上如

```
 * 或者保证上一个结束标签和下一个开始标签之间没有空格如

• abc
  
• def
  
• ghi
  

* 在CSS中
 * 设置margin-right为-8px----- **注意第一个元素margin应为0**
 * 子元素设为inline-block父元素font-size为0-----**注意重新设置子元素的字体大小**
 * 使用浮动

##父容器使用overflow: auto| hidden撑开高度的原理是什么？
使父容器形成BFC，形成一个独立的空间，从而撑开高度。

##BFC是什么？如何形成BFC，有什么作用?
* BFC是Block Formatting Context的缩写，意为块级格式上下文。BFC作为独立渲染的区域，可将内部元素与外部元素隔离,形成独立的空间。
* BFC的形成方式有:
 * float属性非none
 * position属性为absolute或fixed
 * display属性为inline-block、table-cell、table-caption、flex或inline-flex
 * overflow属性为auto,hidden.
* BFC的作用有:
 * 清楚浮动
 * 使外边距不发生合并

##浮动导致的父容器高度塌陷指什么？为什么会产生？有几种解决方法
* 父元素高度若为自适应，子元素设为浮动，父元素无法察觉子元素的存在，从而造成高度塌陷。
* 解决方法:
 * 使父容器形成BFC
 * 在浮动元素后面添加一个空div，并且clear:both（**缺点：增加无意义标签**）
 * 利用伪元素:after 清楚浮动

.clearfix:after{/* 在clearfix内部的最后添加的一个元素 /
content: "";/ 内容为空 /
display: block;/ 以块级元素形式显示 /
clear: both;/ 清除两侧浮动 */
}
.clearfix{
zoom: 1;/ 使元素在IE6/7中也达到上述效果 */
}

以上代码是通过清除浮动撑开父容器,而BFC相当于创造了一个独立的空间,从而达到撑开空间的效果.

关于BFC的理解可参考这篇文章[深入理解BFC和Margin Collapse](http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html)