外边距折叠

最近做项目遇到了外边距折叠的问题，做技术当然要知其然，知其所以然。
外边距折叠(margin-collapsing)，又叫外边距合并。它是指块级元素的上外边距和下外边距有时会合并成一个外边距，其大小取其中最大的一个

为啥需要外边距折叠呢在CSS1.0的文档里就有了说明：
外边距用来指定非浮动元素与其周围盒子边缘的最小距离。两个或两个以上的相邻的垂直外边距会被折叠并使用它们之间最大的那个外边距值。多数情况下，折叠垂直外边距可以在视觉上显得更美观，也更贴近设计师的预期。

那么具体什么情况下会发生外边距折叠的情况呢

1.兄弟元素之间
如果两个相邻元素的上下外边距相遇，那么会产生外边距折叠。

2.父元素与它的第一个元素或者最后一个元素之间
父元素与它的子元素之间隔着内边距、边框、内容。如果这些没有了，那么父元素和子元素的外边距相邻，就会发生外边距折叠。

3.空的块级元素
盒模型是内容-->内边距-->边框-->外边距，如果内容没了，那么margin-top和margin-bottom就相遇了，自然就会产生外边距折叠喽。

一言以蔽之，不能让两个margin相遇，否则就会发生外边距折叠。

那么我们如何来避免外边距折叠呢

1.浮动元素不会与任何元素发生叠加，也包括它的子元素
2.绝对定位元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
3.inline-block 元素和其他任何元素之间不发生外边距叠加，也包括它的子元素
4.创建了 BFC 的元素不会和它的子元素发生外边距叠加 (兄弟元素还是会叠加的哦)