我的前端学习笔记11——inline-block、BFC、边距合并

晓：创造黎明为己任！

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

• 两个块级元素垂直外边距相遇时，将形成一个外边距。合并后的外边距将等于两个块级元素外边距高度的最大者。

• 不让相邻的外边距合并，举例如下：

只需要将每一个元素都加BFC即可。

• 不让父子外边距合并，举例如下：
  只需要给子元素加边框、内边距即可。
• 如果没有元素，margin自身都会合并。

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

具体情况如下：

• 方法一：将元素前的空格去掉，举例如下：

• 方法二：为了避免元素太长不容易看，可以采用这种方式：

方法三：负margin法。举例如下：

可以看到这里有一个问题，当设置margin：-4px时，元素之间的缝隙不见了，但是第一个元素出了边界。解决方法就是：

• 方法四：浮动。举例如下：

但是这里出现了问题：父容器（边框）无法包裹浮动元素。解决方法就是使用清除浮动 overflow:auto，举例如下：

• 方法五：给边框设置font-size:0 最简单的方法，经验得来。举例如下：

因为边框的font-size为零，但是li设置字体大小，对字本身没有影响。

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

• 相当于创建了一个独立的空间。overflow: auto| hidden使父容器形成BFC，从而清除浮动。原理是根据BFC的特性之一：计算一个BFC的高度时，其内部浮动元素的高度也会参与计算。

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

• BFC（Block formatting context）直译为”块级格式化上下文”。
• 如何形成BFC:

1. float属性不为none
2. position为absolute
3. display为inline-block, table-cell, table-caption, flex, inline-flex
4. overflow不为visible

• 页面渲染BFC时会将所有元素都计算在内包括绝对定位和浮动元素，阻止浮动导致父元素塌陷。

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

• 当元素浮动时，会脱离页面，是的父元素看不到该元素，导致父容器不能讲元素包括在内，出现塌陷。
• 解决方法：

1. 父元素上加BFC；
2. 清除浮动clear:both；
3. 父元素设置高度。

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

.clearfix:after：给父元素添加伪类；
content:""：添加一行空文本；
display:block：让添加的文本变成块级元素；
clear:both：清楚此元素的两边浮动；
*zoom:1：以上是IE8以后的属性，这个是为了之前不支持次属性的浏览器。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。

• 这几行代码是清除浮动，利用伪类after在最下面添加一个块级元素，使得父元素能包裹起来，达到清除浮动的效果。BFC是包含浮动，自身形成一个独立的空间。