Margin Collapse&&BFC

上一篇中说道了position、display、float三兄弟，它们三者之间拥有各自的特性以及相互作用。而这些影响归根揭底都是盒子模型的位置问题，但盒子模型的位置问题不止是它们三者作用，还有本文中要说道的两位：Margin Collapse和BFC。

Margin Collapse翻译成中文是外边距塌陷，也可以说外边距叠加。他的定义是：

当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

外边距叠加有几种情况，借用W3School几张图作为直观说明：

第一种情况是两垂直盒子：

第二种情况是父子盒子：

第三种情况是空内容元素本身叠加：

第四种情况是空元素本身叠加又叠加另一个元素的外边距：

而在外边距叠加中有一个注意事项，只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。而且必须处于同一个BFC中。

因此，在外边距叠加问题中又出现一个新的概念，什么是BFC？

w3c规范中的BFC的定义：

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

也就是说，在BFC中的元素是不受外界影响的。

同样，也就是说明创建了新的BFC的元素（例如浮动元素或者’overflow’值为’visible’以外的元素）与它的子元素的外边距不会折叠。

当然，BFC同样可以应用在清除浮动的不利影响下。

生成BFC的方法：

根元素

float属性不为none

position为absolute或fixed

display为inline-block, table-cell, table-caption, flex, inline-flex

overflow不为visible

总结消除外边距叠加的方法：

创建BFC

元素为inline-block时，它与其兄弟元素、子元素和父元素的外边距都不会折叠

创建单侧margin值