前端基础（问答8）

---

keywords: inline-block、BFC、边距合并、overflow、高度塌陷。

---

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

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距高度中的最大值。

1、当一个元素出现在另一个元素上面时，第一个元素的下外边距和第二个元素的上外边距会发生合并：

上下相邻元素外边距合并

2、当一个元素包含在另一个元素中时（假设没有内边距或边框把外边距分隔开）它们的上或下外边距也会发生合并：

包含元素外边距合并

3、假设有一个空元素，它有外边距，但是没有边框或填充。在这种情况下，元素的上外边距和下外边距就碰到了一起，发生合并：

元素自身外边距合并

4、假设有一个空元素，它有外边距，但是没有边框或填充。如果这个这个元素的外边距遇到另一个元素的外边距，将发生合并：

连续外边距合并.png

避免元素外边距合并的关键：
1、对于包含元素外边距合并的情况（父子关系），对父元素加边框、填充或使父元素形成BFC；
2、对于兄弟关系，需使某一元素形成BFC（若使用overflow，需用父容器隔离）。
3、浮动和绝对定位不与任何元素产生 margin 折叠;
4、inline-block元素与其兄弟元素、子元素和父元素的外边距都不会折叠（包括其父元素和子元素）；

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

行内元素间使用换行符、空格、制表符会产生一个空格的缝隙。去除缝隙的常见方法有一下几种：
1、删除换行符、空格、制表符;
2、使用负margin;
3、使用浮动（使用overflow或浮动父容器来撑开高度）：

2016-06-23_11-11-14.png

4、对父容器设置font-size:0：
文本是可以由font控制的，若父容器的font-size设置为0，则容器内的文本消失，文本间的缝隙当然也就不存在了，此时再将inline-block的元素设置font-size覆盖就好。

font-size:0

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

使父容器形成BFC，此时父元素的height会计算浮动元素高度，因此撑开了容器高度。

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

BFC,全名block famatting context，中文译名块级格式化上下文。w3c这样解释：

浮动，绝对定位元素，inline-block，table-cell， table-caption和overflow的值不为visible的元素，将创建一个新的块级格式化上下文。

根据定义，可以给定给以下属性赋值创建BFC：
1、float 2、position 3、display 4、overflow

Formattiong Context指的是页面中的一个渲染区域，它决定子元素如何定位，以及与其他元素的相互关系和作用。

BFC指的是一个独立的块级渲染区域，只有block-level box参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。

BFC的作用：
1、防止margin重叠；
2、防止浮动元素高度塌陷，闭合浮动元素；

参考：
我对BFC的理解
理解css中的BFC
深入理解BFC
BFC神奇的背后原理

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

高度塌陷.gif

浮动元素脱离了普通流，父容器失去浮动元素的高度，造成父容器高度塌陷。

避免高度塌陷的关键在于让父元素生成BFC。
1、利用overflow;
2、float父元素;
3、利用inline-block;
4、利用absolute;
当然还可以利用clear：
1、在父元素中添加一个最靠后的子标签

在css中添加.clear{clear:both;}；
2、添加伪元素after:

content:'';
display:block;
clear:both;
}```

参考：
[那些年我们一起清除过的浮动](http://www.iyunlu.com/view/css-xhtml/55.html)
- ###以下代码每一行的作用是什么？ 为什么会产生作用？ 和BFC撑开空间有什么区别？

.clearfix:after{ /伪元素选择器，在选中元素内容区的最后添加内容/
content:''; /添加空白/
display:block; /显示为块级元素/
clear:both; /清除浮动，不允许元素左右两边存在浮动元素/
}
.clearfix{
zoom: 1; /zoom是ie中的专有属性，触发ie浏览器的halayout属
性，兼容ie6、7*/
}```
通过添加clearfix类，使新添加的空白内容撑开父容器的高度，达到不添加新的标签即可闭合浮动的目的。

与BFC撑开空间的原理（计算浮动元素高度）不同，使用以上代码根本在于充分利用了clear属性使元素下移，撑开高度，显然浮动元素的高度是不被计算在内的。