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

在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：代码

父子合并

父子合并，底部

兄弟合并

例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使用未生效

未阻止合并

阻止了合并

浮动

绝对定位

例1-3:代码

inline-block

padding不为0

有border

height不为auto

设置为min-height

自身合并

关于clearance

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

也就是说，我们只需要知道，闭合浮动的元素的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清除浮动的副作用

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

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

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