供你参考 网格，但有副作用:)

.parent {
  display: grid
}

溢出:隐藏可以防止边距崩溃，但它并不是没有副作用-即它…隐藏溢出。

除了这一点和你提到的，你只需要学会接受它，并为它们真正有用的那一天而学习(每3到5年一次)。

保证金暴跌主要有两种类型:

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

只有在后一种情况下，使用填充或边框才能防止崩溃。此外，任何溢出值与父对象的默认值(可见)不同，都将防止崩溃。因此，overflow: auto和overflow: hidden具有相同的效果。也许使用hidden的唯一不同之处在于，如果父对象具有固定的高度，则隐藏内容会导致意想不到的后果。

其他属性，一旦应用到父，可以帮助修复这种行为:

浮动:左/右 位置:绝对的 显示方式:inline-block / flex / grid

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

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

来源:Sitepoint的文章“崩溃边缘”

您还可以使用老式的micro clearfix。

#container::before, #container::after{
    content: ' ';
    display: table;
}

查看更新后的小提琴:http://jsfiddle.net/XB9wX/97/

供你参考 网格，但有副作用:)

.parent {
  display: grid
}

display: flow-root;

display: flex;
flex-direction: column;

*现代浏览器(不包括IE11)支持display: flow-root和display: flex。

例子

section { background: green; outline: 2px solid purple; } p { background: yellow; margin: 1em 0; } section.flow-root { display: flow-root; } section.flex { display: flex; flex-direction: column; } <h2>Default</h2> <section> <p>Paragraph 1</p> <p>Paragraph 2</p> </section> <h2><code>flow-root</code> (Fixes only container)</h2> <section class="flow-root"> <p>Paragraph 1</p> <p>Paragraph 2</p> </section> <h2><code>flex</code> (Fixes both container & siblings)</h2> <section class="flex"> <p>Paragraph 1</p> <p>Paragraph 2</p> </section>