inline-block、BFC、边距合并

本教程版权归小圆和饥人谷所有，转载须说明来源

问答

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

合并场景：相邻的两个盒子（有可能是兄弟关系也可能是父子关系）的外边距可以结合成一个单独的外边距。当一个元素没有内容、高度、边框以及内边距时，其自身的上下外边距也会发生合并。
如何合并：

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

如何不合并：

• 在父容器上设置border或者padding使父子元素的外边距不相邻。
• 创建了新的BFC的元素（例如浮动元素或者overflow值为visible以外的元素）与它的子元素的外边距不会折叠
• 浮动元素和绝对定位元素不与任何元素的外边距产生折叠（包括其父元素和子元素）
  原因：浮动元素和绝对定位元素不与其他盒子产生外边距折叠是因为元素会脱离当前的文档流，违反了上面所述的两个margin是邻接的条件同时，又因为浮动和绝对定位会使元素为它的内容创建新的BFC**，因此该元素和子元素所处的BFC是不相同的，因此也不会产生margin的折叠。
• inline-block元素不与任何元素的外边距产生折叠
  原因：inline-block不符合w3c规范所说元素必须是块级盒子的条件，因为规范中又说明，块级盒子的display属性必须是以下三种之一：'block'， 'list-item'， 和 'table'。

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

• 将排列的元素放在一行，标签之间没有空格。此方法简单但不美观。
• 将下一个元素的 < 和上一个元素的 > 同行写。与第一个方法相比增加了代码的可读性。
• 设置负margin-left，但是第一个元素的margin-left值需要单独调整为0，否则会发生偏移。
• 使用float浮动，但是需要在其块级容器上清除浮动（overflow: hidden | auto）,较为麻烦。
• 将font-size值设置为0，此方法最简单实用。

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

因为在元素浮动后，脱离文档流，父容器没有内容，所以会高度塌陷，而使用over:auto/hidden后，父元素形成了一个独立的空间（BFC），会计算内部浮动元素的高度。

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

BFC（Block formatting contexts）:是一个独立的布局环境。BFC中的元素布局不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响），并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素组成）都会垂直的沿着其父元素的边框排列。
如何形成：浮动元素和绝对定位元素，非块级盒子的块级容器（例如inline-blocks, table-cells和teble-captions）以及overflow值不为"visiable"的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
作用：

• 在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。
• 在BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。
• 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

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

父元素高度塌陷：指子元素浮动后脱离文档流，父容器无法包围住子元素，导致父容器高度塌陷。
解决方法：

• 使用伪元素清除浮动

.box::after{
    content:"";
    display:block;
    clear:both;
} 
.left,.right{
    width:100px;
    height:100px;
    background:red;
    float:left;
}
 
    
 
    
 

• 将父容器也进行浮动

.box{
    float:left;
}
.left,.right{
    width:100px;
    height:100px;
    background:red;
    float:left;
}
 
    
 
    
 

• 使用overflow:hidden或者auto清除浮动

.box{
    overflow: hidden;
} //overflow:auto也是可以的 
.left,.right{
    width:100px;
    height:100px;
    background:red;
    float:left;
}