вы также можете использовать старый добрый микро clearfix для этого.

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

смотрите обновленную скрипку:http://jsfiddle.net/XB9wX/97/

один аккуратный трюк, чтобы отключить крах полей, который не имеет визуального воздействия, насколько я знаю, устанавливает заполнение родителя в 0.05px:

.parentClass {
    padding: 0.05px;
}

прокладка больше не 0, поэтому коллапс больше не будет происходить, но в то же время прокладка достаточно мала, чтобы визуально она округлилась до 0.

если требуется какое-либо другое заполнение, то примените заполнение только к "направлению", в котором не требуется сворачивание полей, например padding-top: 0.05px;.

пример:

.noCollapse {
  padding: 0.05px;
}

.parent {
  background-color: red;
  width: 150px;
}

.children {
  margin-top: 50px;

  background-color: lime;      
  width: 100px;
  height: 100px;
}

<h3>Border collapsing</h3>
<div class="parent">
  <div class="children">
  </div>
</div>

<h3>No border collapsing</h3>
<div class="parent noCollapse">
  <div class="children">
  </div>
</div>

Edit: изменил значение с 0.1 до 0.05. Как Крис Морган упомянул в комментарии ниже, и от этот небольшой тест, кажется, что действительно Firefox принимает 0.1px обивка во внимание. Хотя,0.05px кажется, чтобы сделать трюк.

overflow:hidden предотвращает обрушение полей, но он не свободен от побочных эффектов, а именно... скрывает переполнение.

помимо этого и того, что вы упомянули, вам просто нужно научиться жить с этим и учиться в этот день, когда они действительно полезны (приходит каждые 3 до 5 лет).

каждый браузер на основе webkit должен поддерживать свойства-webkit-margin-collapse. Есть также подпроценты, чтобы установить его только для верхнего или нижнего поля. Вы можете дать ему значения collapse (по умолчанию), discard (устанавливает margin в 0, если есть соседнее поле) и separate (предотвращает коллапс поля).

Я проверил, что это работает на 2014 версии Chrome и Safari. К сожалению, я не думаю, что это будет поддерживаться в IE, потому что он не основан на движок WebKit.

читать ссылка Safari CSS от Apple для полного объяснения.

Если вы проверяете страница расширений CSS webkit Mozilla, они перечисляют эти свойства как собственнические и рекомендуют не использовать их. Это связано с тем, что они, скорее всего, не будут входить в стандартный CSS в ближайшее время, и только браузеры на основе webkit будут поддерживать их.

Я знаю, что это очень старый пост, но просто хотел сказать, что использование flexbox на родительском элементе отключит сворачивание полей для его дочерних элементов.

у меня была аналогичная проблема с крахом маржи из-за родительского наличия position установить в относительное. Вот список команд, которые можно использовать для отключения свертывания полей.

ВОТ ПЛОЩАДКА ДЛЯ ТЕСТИРОВАНИЯ

просто попробуйте назначить любой parent-fix* класс div.container элемент, или любой класс children-fix* до div.margin. Выберите тот, который соответствует вашим потребностям лучших.

, когда

• рентабельность рушится и отключен, div.absolute С красным фоном будет расположен в самой верхней части страницы.
• маржа рушитсяdiv.absolute будет располагаться в той же координате Y, что и div.margin

html, body { margin: 0; padding: 0; }

.container {
  width: 100%;
  position: relative;
}

.absolute {
  position: absolute;
  top: 0;
  left: 50px;
  right: 50px;
  height: 100px;
  border: 5px solid #F00;
  background-color: rgba(255, 0, 0, 0.5);
}

.margin {
  width: 100%;
  height: 20px;
  background-color: #444;
  margin-top: 50px;
  color: #FFF;
}

/* Here are some examples on how to disable margin 
   collapsing from within parent (.container) */
.parent-fix1 { padding-top: 1px; }
.parent-fix2 { border: 1px solid rgba(0,0,0, 0);}
.parent-fix3 { overflow: auto;}
.parent-fix4 { float: left;}
.parent-fix5 { display: inline-block; }
.parent-fix6 { position: absolute; }
.parent-fix7 { display: flex; }
.parent-fix8 { -webkit-margin-collapse: separate; }
.parent-fix9:before {  content: ' '; display: table; }

/* Here are some examples on how to disable margin 
   collapsing from within children (.margin) */
.children-fix1 { float: left; }
.children-fix2 { display: inline-block; }

<div class="container parent-fix1">
  <div class="margin children-fix">margin</div>
  <div class="absolute"></div>
</div>

здесь jsFiddle С примером вы можете редактировать

на самом деле, есть один, который работает безотказно:

дисплей: гибкий; флекс-направление: колонка;

пока вы можете жить с поддержкой только IE10 и выше

.container {
  display: flex;
  flex-direction: column;
    background: #ddd;
    width: 15em;
}

.square {
    margin: 15px;
    height: 3em;
    background: yellow;
}

<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>
<div class="container">
    <div class="square"></div>
    <div class="square"></div>
    <div class="square"></div>
</div>

для вашей информации вы могли бы использовать сетка, но с побочными эффектами:)

.parent {
  display: grid
}