Atualizar: o comportamento abaixo não é visível no Firefox.

Vamos começar com a seguinte situação:

html {
  background: red;
}

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

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

<div></div>

O corpo é definido com ummin-height:100vh e temos uma barra de rolagem que nos permite ver ohtml. Aqui estamos tendo umcolapso da margem, a margem dodiv é recolhido com a margem do corpo e, portanto, cria esse espaço após o corpo e a barra de rolagem.

Se nos referirmos aoespecificação nós temos este caso:

Duas margens são adjacentes se e somente se:

...

margem inferior de um último filho em fluxo e margem inferior de seu pai, se o pai tiver altura computada 'automática'

adiv é oúltimo fluxo elemento ebody possui height auto, pois especificamos apenas min-height.

Agora vamos adicionar mais elementos que podem ser afetados por essa margem e manter as regras de recolhimento de margem. A única maneira de fazer isso é adicionarflutuou elementos para manter a nossadiv sempre o último elemento em fluxo.

Aqui está o novo código:

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>

Como podemos ver claramente, ainda temos o colapso da margem (por causa do pergaminho) E os elementos flutuantes também são pressionados pela mesma quantidade da margem.

Então, minha pergunta é:por que esse comportamento?

Meu entendimento do colapso da margem é que, no final, teremos apenas1 margem aplicada em algum lugar. Ao adicionar novos elementos, espero ter uma dessas duas situações:

A adição dos elementos flutuantes cancelará de alguma forma o colapso da margem(não pode ser esse o caso, pois não estamos infringindo nenhuma regra)Os elementos flutuantes não serão afetados pela margem, pois este colapsou com a margem do corpo e, portanto, foi movido / aplicado ao corpo.(Este é um caso lógico para mim)

Na especificação, também encontrei estecomplexo declaração:

Observe que as posições dos elementos que foram recolhidas não afetam as posições dos outros elementos cujas margens estão sendo recolhidas; a posição da borda superior da borda é necessária apenas para definir os descendentes desses elementos.

Entendo, acima, que os outros elementos não são afetados pelo colapso da margem e, assim, mantemos sua posição inicial, o que explica por que os elementos flutuantes são empurrados para baixo.(Eu não tenho certeza se este é o caso, a propósito)

Se essa é a explicação, é um pouco confusa e ilógica para mim. Eu adicionei1 margem e acabo tendodois margens que são claramente visíveis?

Então, por que esse comportamento? Ou talvez eu tenha perdido algo na especificação e estamos enfrentando mais do que um simples colapso de margem?

Notícia importante: Antes de responder, observe que não estou procurando uma correção para isso ou como evitá-lo. Conheço pelo menos cinco maneiras de cancelar o colapso de margens (preenchimento, estouro, borda, flexbox, etc.) Estou procurando entender por que isso acontece.

Para a referência: isso iniciado poressa questão Onde@Alohci destaquei isso na minha resposta e depois de alguns comentários, nós dois não ficamos convencidos