inline-block、BFC、边距合并

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

在CSS当中，相邻的两个盒子（可能是兄弟关系也可能是父子关系）的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠，并且因而所结合成的外边距称为折叠外边距。

折叠的结果：

两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
代码

两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
代码

两个外边距一正一负时，折叠结果是两者的相加的和。
代码

---

产生折叠的必备条件：margin必须是邻接的!

而根据w3c规范，两个margin是邻接的必须满足以下条件：

• 必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
• 没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
• 都属于垂直方向上相邻的外边距，可以是下面任意一种情况

1. 元素的margin-top与其第一个常规文档流的子元素的margin-top(父子合并)

• height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom

• 元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top(兄弟合并)

• 高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom（自身合并）

例1：代码

父子合并

例1-1： 代码

父子合并，底部

例2： 代码

兄弟合并

例3：代码

自身合并

---

以上的条件意味着下列的规则：即不让元素边距合并的办法

1. 创建了新的BFC的元素（例如浮动元素或者'overflow'值为'visible'以外的元素）与它的子元素的外边距不会折叠

• 浮动元素不与任何元素的外边距产生折叠（包括其父元素和子元素）
• 绝对定位元素不与任何元素的外边距产生折叠
• inline-block元素不与任何元素的外边距产生折叠
• 兄弟合并。一个常规文档流元素的margin-bottom与它下一个常规文档流的兄弟元素的margin-top会产生折叠，除非它们之间存在间隙（clearance）。
• 父子合并。一个常规文档流元素的margin-top 与其第一个常规文档流的子元素的margin-top产生折叠，条件为父元素不包含 padding 和 border ，子元素不包含 clearance。
  兄弟合并
• 父子合并。一个 'height' 为 'auto' 并且 'min-height' 为 '0'的常规文档流元素的 margin-bottom 会与其最后一个常规文档流子元素的 margin-bottom 折叠，条件为父元素不包含 padding 和 border ，子元素的 margin-bottom 不与包含 clearance 的 margin-top 折叠。
• 一个不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其 'height' 为 0 或 'auto'， 'min-height' 为 '0'，其里面也不包含行盒(line box)，其自身的 margin-top 和 margin-bottom 会折叠。

例1:代码

对box2使用未生效

未阻止合并

对box2父元素box3使用生效

阻止了合并

例1-1： 代码

浮动

例1-2： 代码

绝对定位

例1-3:代码

inline-block

例3： 代码
padding不为0

padding不为0

有border

例3-1： 代码

height不为auto

例3-1-2： 代码
将height改为min-height则可以发生外边距合并，但记住min-height不要设置太大，大于auto会导致多出一部分高度.

设置为min-height

例4： 代码
不包含border-top、border-bottom、padding-top、padding-bottom的常规文档流元素，并且其 'height' 为 0 或 'auto'， 'min-height' 为 '0'，其里面也不包含行盒(line box)其中只要一点不满足，就不会发生折叠。

自身合并

---

关于clearance

当浮动元素之后的元素设置clear以闭合相关方向的浮动时，根据w3c规范规定，闭合浮动的元素会在其margin-top以上产生一定的空隙（clearance，如下图），该空隙会阻止元素margin-top的折叠，并作为间距存在于元素的margin-top的上方。
代码

上面的图中我们可以看到，我们为红色块盒设置的40px的margin-top（这里我们通过相同高度的阴影来将其可视化）好像并没有对紫色块盒起作用，而且无论我们怎么修改这个margin-top值都不会影响红色块盒的位置，而只由绿色块盒的margin-bottom所决定。

也就是说，我们只需要知道，闭合浮动的元素的border-top会紧贴着相应的浮动元素的margin-bottom。
闭合浮动的块盒在margin-top上所产生的间距（clearance）的值与该块盒的margin-top之和应该足够让该块盒垂直的跨越浮动元素的margin-bottom，使闭合浮动的块盒的border-top恰好与浮动元素的块盒的margin-bottom相邻接。
用上图例子中的相关值可以得出这样一个式子：r-margin-top + r-clearance = g-margin-top + g-height + g-margin-bottom
如果r-margin-top大于g-margin-top + g-height + g-margin-bottom时，r-clearance则失去作用，闭合浮动的块盒会移动
PS！闭合浮动并不能使浮动元素回到原来的BFC当中！

---

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

缝隙存在的本质原因是因为换行空格造成的原因

• 写在同一行

  
  
  

  另外一种写法，不写在同一行

  

• 利用负margin,注意第一个元素不需要负margin

  
  
  

• 使用浮动

  
  
  

• 利用父元素font-size

  
  
  

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

overflow 属性规定当内容溢出元素框时发生的事情。
当元素设置浮动时，父元素感知不到元素的存在，造成高度塌陷。在父容器使用overflow属性是形成一个BFC，使其内部元素不受外界的影响。

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

• 定义：浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。
• BFC是一个名词，是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子里面物品的摆放是不受外界的影响的。（类似于动漫中的结界）
  形成BFC：
• float：left|right
• 绝对定位absolute，fixed
• overflow（visible值除外）
• display属性为table-cell, table-caption, inline-block
• 作用：

1. 用于消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响

• 用于阻止外边距合并
• 页面布局

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

当元素设置浮动时，父元素感知不到子元素的存在，即丢失了高度，造成高度塌陷。
未使用浮动时

为了让123并在一块，使用浮动，结果导致父元素高度塌陷。

解决办法：

• 利用空元素清除浮动：
  代码

• 在CSS中创建空元素：
  代码

• 使用BFC
  代码

关于使用BFC清除浮动的副作用

方法	说明
overflow	副作用最小，不过可能会不需要overflow的特性
absolute	收缩元素宽度，不易解决
float	收缩元素宽度，影响布局，可借助clear解决
inline-block	收缩元素宽度，不易解决

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

.clearfix:after{
content: '';
display: block;
clear: both;
}
.clearfix{
*zoom: 1;
}

代码	说明
.clearfix:after	伪元素选择器 在claerfix元素之后插入生成的内容
content: '';	内容为空
display: block;	表现为块级元素，如果不表现，行内元素不会撑开父元素
clear: both;	清除两边浮动
*zoom: 1;	IE专有属性，缩放比例，参数设为1的话，多用于清除浮动，伪元素在在IE8以下不支持，IE8部分支持。

---

本文版权归本人及饥人谷所有，转载请注明来源。