BFC和Margin Collapse

BFC：

浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。

在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产生折叠。

在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

合并外边距与BFC ：

折叠的结果：

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

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

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

•  必须是处于常规文档流（非float和绝对定位）的块级盒子,并且处于同一个BFC当中。
•  没有线盒，没有空隙（clearance，下面会讲到），没有padding和border将他们分隔开
•  都属于垂直方向上相邻的外边距，可以是下面任意一种情况
  •  元素的margin-top与其第一个常规文档流的子元素的margin-top
  •  元素的margin-bottom与其下一个常规文档流的兄弟元素的margin-top
  •  height为auto的元素的margin-bottom与其最后一个常规文档流的子元素的margin-bottom
  •  高度为0并且最小高度也为0，不包含常规文档流的子元素，并且自身没有建立新的BFC的元素的margin-top和margin-bottom

以上的条件意味着下列的规则：

•  创建了新的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 会折叠。

防止Margin折叠:

如上所说： 1. 只有文档流中的块级元素会发生Margin折叠 因此可通过将元素从文档流中去除，或者display设为inline-block的方式，防止其与兄弟节点发生margin折叠。 2. 创建BFC的元素，不会与子元素发生margin折叠 因此可通过触发元素的BFC，来防止它与自己的子元素发生Margin折叠 3. 当元素之间产生间隙时，可能不会发生margin折叠 因此可通过padding,border来制造间隙，以防止margin折叠

转载于:https://www.cnblogs.com/huangyong0759/p/4478383.html