边距合并、浮动以及BFC

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

在普通文档流中，有两个块级元素相邻（可以是兄弟元素，也可以是父子元素）且没有边界线（padding或者border），他们的外边距就会出现外边距合并。

合并的结果是：

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

注意，如果一个块级元素没有设置border和padding，只有外边距的话，他自身的上下外边距也是会合并的

不让相邻的外边距合并的条件：

1. 需要在两个外距之间加一条边界线：
   这条边界线可以使padding，也可以是border、可以是BFC形成两个独立空间让两个相邻元素分开主要目的是为了让相邻的外边距互相不能够接触，这样就避免产生外边距合并。

2. 设置其中一个元素为浮动元素或者绝对定位，此元素脱离文档流后不会与任何元素外边距合并。

3. 为其中一个元素加入inline-block,此元素不会与任何元素外边距合并。

父子外边距合并范例：

我是范例

---

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

假设linline-block的对象为元素li：

1. 不让li标签换行，或者li标签的闭合标签>放在第二行，这种思路是清除li元素之间的空格缝隙达到无缝对接
2. 设置margin-left：-4px；这个值相对固定，但带来的问题是第一个li标签会溢出。可单独为第一个设置margin-left:0
3. 为li元素设置浮动。但带来的 问题是父元素无法被撑开，要为父元素设置
   overflow: auto;
4. li元素设置inline-block；为他的父元素设置font-size: 0;同时为li元素里设置font-size（字体大小）

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

overflow: auto| hidden会让元素成为一个BFC，形成一个独立的空间，空间内的排版完全独立，而这个空间里能够包裹浮动流，所以就能被浮动元素撑起高度。

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

BFC是一个独立的布局环境，环境里的任何元素不会受到外界的影响。
要使一个元素形成BFC可以为元素添加：

• display: inline-block;
• overflow: auto| hidden
• 添加浮动
• position:fixed|absolute绝对定位

bfc可以形成一个独立的不受外界干扰的布局，内容按照普通文档流进行排列，我们一般用他来消除浮动元素带来的负面影响。

---

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

浮动导致的父容器高度塌陷是指在父容器元素内如果内容都是浮动元素，而父元素没有规定高度，则父元素会缩为零不会被撑开。
因为浮动元素都是脱离了文档流，父容器会认为里面没有内容所以会产生这样的问题。
解决的办法有：

1. 为父容器添加浮动，父容器的高度就会撑到包含所有浮动元素为止，缺点是会影响到兄弟元素，解决办法是为受影响的元素添加clear:both
2. 为父容器添加overflow:hidden|auto；会撑开父容器高度直到包含所有浮动元素。
3. 为父元素添加子元素空的div块，并对此元素设置clear: both;但是不推荐这样做，影响代码语义化
4. 为父元素设置绝对定位
5. 为父元素添加伪类：

.clearrix:after {
     content: " ";
     display: block; 
     clear: both;
}

---

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

.clearfix:after{    /* 定义伪类，选择在clearfix的元素后面插入一个元素 */
    content: '';      /* 元素内容为空，是行内元素 */
    display: block;   /*  将元素变为块级元素 */
    clear: both;       /* 清楚块级元素浮动 */
}
.clearfix{             /* 选择clearfix元素 */
    *zoom: 1;              /* 兼容IE6，清除浮动 */
}

---