保证金崩盘主要有两种类型：

• 折叠相邻元素之间的边距
• 折叠父元素和子元素之间的边距

使用填充或边框将仅在后一种情况下防止折叠。此外，任何与应用于父级overflow的默认值 ( )
不同的值都将防止崩溃。visible因此，两者overflow: auto和overflow: hidden将具有相同的效果。使用时唯一的区别可能hidden是如果父级具有固定高度，隐藏内容的意外后果。

其他属性，一旦应用于父级，可以帮助修复此行为：

• float: left / right
• position: absolute
• display: inline-block / flex

您可以在这里测试所有这些：http: //jsfiddle.net/XB9wX/1/。

我应该补充一点，像往常一样，Internet Explorer 是个例外。更具体地说，在 IE 7
中，当为父元素指定某种布局时，边距不会折叠，例如width.

资料来源：Sitepoint 的文章 Collapsing
Margins