inline-block、BFC、边距合并

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

同一文档流中的两个相邻块级元素会出现外边距合并。外边距合并会取margin的最大值。
同级相邻块级元素合并：

同级相邻块级元素合并
父子元素外边距合并，并且会合并成父元素外边距： 父子元素外边距合并

如何阻止相邻元素的外边距合并：
阻止父子元素外边距合并：

1. 通过设值父元素padding防止边距合并：
   设值父元素`padding`
2. 通过设置父元素border防止边距合并
   设置父元素`border`

防止兄弟元素边距合并，兄弟元素不会在水平方向上边距合并：

1. 通过设置display:inline-block：
   通过设置`display:inline-block`

2. 通过设置浮动：

   
   通过设置浮动
3. 把两个元素放在不同div中，再设置overflow属性：
   出发BFC

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

1. 通过更改书写方式：

   
   通过更改书写方式
   通过更改书写方式
2. 通过设置负margin,但第一个li会溢出：
   通过设置负`margin`

3. 浮动：

   
   浮动
4. 父容器设置font-size:0：
   父容器设置`font-size:0`

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

overflow:auto|hidden会触发bfc特性使其包裹浮动元素。

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

BFC是一个独立布局环境，在BFC中的元素时不受外界元素影响的，并且在一个BFC中块盒和行盒都会垂直的沿着其父元素的边框排列，两个盒子之间的间隙是由他们的margin值决定的。
浮动元素，绝对定位元素，固定定位元素，以及非块级盒子（如inline-block table-cell table-caption）和overflow值不为visable的块级盒子都会为他们创建新的BFC。
这个特性可以用来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响，例如边距合并。

BFC参考

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

元素设置浮动之后会脱离文档流，父元素会忽略浮动元素的存在，而且浮动元素会产生新的BFC，成为一个对立的布局环境不受其他元素影响，所以其父容器会产生高度塌陷。

父容器高度塌陷

解决方法：
只要让容器形成新的BFC格式，就可以解决父容器高度塌陷问题。那个元素受影响了就设置那个元素属性
主要方式有：

1. 设置clear属性：
   设置`clear`属性
2. 设置overflow属性：
   设置`overflow`属性

3. 其他方式：

   
   其他方式
   

   这些方式都会解决父元素塌陷问题，但是由于改变父容器属性会引发较多问题，所以常用的还是前两种。

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

.clearfix:after{/*给clearfix设置after伪类*/
    content: '';/*添加一个没内容的行内元素*/
    display: block;/*把该元素设置为块级元素*/
    clear: both;/*清除两边浮动*/
}
.clearfix{
    *zoom: 1;/*兼容IE6,7*/
}

在.clearfix的末尾添加一个伪元素，并将其设置为块级元素，并且清楚左右浮动，让父容器把塌陷空间撑开。
BFC会让父元素变为一个独立空间，上述方法只是撑开内容。

代码

Github
代码一在线预览
代码二在线预览

本文版权归本人和饥人谷所有，转载请注明来源。