ить: приведенное ниже поведение не отображается в Firefox.

Начнем со следующей ситуации:

html {
  background: red;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: green;
}

div {
  min-height: 50px;
  background-color: pink;
  margin-bottom: 50px;
}

<div></div>

Тело определяется сmin-height:100vh и у нас есть полоса прокрутки, которая позволяет нам видетьhtml, Здесь мы имеемМаржа сворачивания, запасdiv сворачивается с полем тела и, таким образом, создает это пространство после тела и полосы прокрутки.

Если мы ссылаемся наСпецификация у нас есть этот случай:

Два поля соприкасаются, если и только если:

...

нижнее поле последнего входящего дочернего элемента и нижнее поле его родителя, если родительский объект имеет вычисленную высоту 'auto'

div этопоследний поток элемент иbody имеет высоту auto, как мы только указали min-height.

Теперь давайте добавим больше элементов, на которые может повлиять это поле, и оставим правила свертывания полей. Единственный способ сделать это - добавитьплавали элементы, чтобы сохранить нашdiv всегда последний элемент потока.

Вот новый код:

html {
  background: red;
}

body {
  margin: 0;
  min-height: 100vh;
  background-color: green;
}

div {
  min-height: 50px;
  background-color: pink;
  margin-bottom: 50px;
}
.l {
  width:45%;
  height:50px;
  float:left;
  margin:0;
}
.r {
  width:45%;
  height:50px;
  float:right;
  margin:0;
}

<div></div>
<div class="l"></div>
<div class="r"></div>

Как мы можем ясно видеть, у нас все еще есть сворачивание полей (из-за прокрутки), и всплывающие элементы также выталкиваются на ту же величину запаса.

Итак, мой вопрос:почему такое поведение?

Я понимаю, что падение маржи заключается в том, что в конце мы будем иметь толькоодин поле применяется где-то. Добавляя новые элементы, я ожидаю иметь одну из следующих двух ситуаций:

Добавление плавающих элементов как-то отменяет разрушение полей(это не может быть так, поскольку мы не нарушаем никаких правил)Плавающие элементы не будут затронуты запасом, так как этот свернут с запасом на тело и, таким образом, перемещен / применен к телу.(Это логичный случай для меня)

В спецификации я также нашел этосложный заявление:

Обратите внимание, что позиции элементов, которые были свернуты, не влияют на позиции других элементов, с полями которых они свернуты; положение края верхней границы требуется только для размещения потомков этих элементов.

Из вышесказанного я понимаю, что другие элементы не подвержены разрушению полей и, таким образом, сохраняют свое исходное положение, что объясняет, почему всплывающие элементы толкаются вниз.(Я не уверен, если это так, кстати)

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

Так почему такое поведение? Или, может быть, я что-то упустил в спецификации, и мы столкнулись с чем-то большим, чем просто обвал?

Важное замечаниеПеред тем, как ответить, обратите внимание, что я не ищу решение этой проблемы или как ее избежать. Я знаю как минимум 5 способов отменить коллапсирование полей (отступы, переполнение, границы, flexbox и т. Д.). Я пытаюсь понять, почему это происходит.

Для справки: это началось сэтот вопрос где@Alohci подчеркнул это в моем ответе, и после нескольких комментариев мы оба не убедились