inline-block、BFC、边距合并

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

• 当两个垂直的元素外边距相遇时，就会形成一个外边距，这个就是外边距合并现象。
• 相邻元素和父子元素之间都会出现外边距合并的现象。

• 当两个合并的外边距都是正数时，合并后外边距取值最大数。
• 当两个合并的外边距都是负数时，合并后外边距取值绝对值最大数。
• 当两个合并的外边距一正一负时，合并后外边距取值两者的和。

示例

3.如图示案例中，父元素（黄色区域）中的子元素（红色和绿色区域）分别设置了外边距，但是子元素和父元素之间没有上外边距，这就是父子外边距合并现象。

示例

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

1.标签写在一行不换行或者在标签相连接的地方换行。

示例

2.设置元素浮动。

示例

3.重新设置父元素和子元素的字体大小。

示例

4.利于负margin（margin:-4px）。

示例

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

1.overflow:auto和overflow:hidden会使父容器形成新的BFC，新的BFC是一个独立的布局环境，可以清除浮动带来的影响，所以浮动清除后，父容器自然就被撑开了。

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

1.BFC是什么：

• 浮动元素和绝对定位元素，非块级盒子的块级容器（例如：inline-blocks，table-cells和table-captions），以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的 BFC（块级格式上下文）。
• 在BFC中，盒子从顶端开始垂直的一个接一个地排列，两个盒子之间的垂直间隙是由他们的margin值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
• 在BFC中。每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘（border-left）（对于从右到左的格式来说，则触碰到右边缘）。

2.BFC的通俗理解：

• 首先BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界影响的。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒和行盒（行盒由一行中所有的內联元素所组成）都会垂直的沿着其父元素的边框排列。

3.如何形成BFC

• 使用浮动：float:right或者float:left。
• 使用绝对定位：position:absolute或者position:fixed。
• 使用overflow:hidden或者overflow:auto;
• 使用display属性：display值为table-cell, table-caption, inline-block, flex, 或者inline-flex。

4.BFC作用：

• 清除浮动的影响，撑开父容器，便于布局；
• 防止外边距合并的现象发生。
  如下图所示，在两个div中分别加上父容器，然后在父容器中设置overflow:auto，使父容器形成BFC，这样就可以防止元素外边距合并了。

防止外边距合并案例

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

1.父容器高度塌陷是指当父容器的高度height设置为0时，父容器内部的元素设置浮动后，浮动后的元素脱离文档流，父容器内没有元素支持，高度变为0。
2.解决方法：

• 清除元素内部浮动带来的影响；
  如图所示，运用两种常见的方法清除子元素浮动，即可撑开父元素的高度。

示例

• 让父元素形成BFC；
  如图所示，可以使用几种方法让父元素形成BFC，清除浮动的影响，撑开父容器。

示例

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

代码

作用，区别

本教程归本人和饥人谷所有，转载需说明来源！