Margin falls off with a floating element, why is additional margin added?

Question

Update : The following behavior does not appear in Firefox.

Let's start with the following situation:

html {
  background: red;
}

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

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

<div></div>

Run codeHide result

The body is defined with min-height:100vhand we have a scroll bar that allows us to see html. Here we have a narrowing of the fields , the field divis compressed with the field of the body and, thus, we create this space after the body and scroll bar.

If we refer to the specification, we have this case:

Two fields are in contact if and only if:

...

the bottom field of the last incoming child and the bottom field of its parent if the parent has a calculated height of '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>

Hide result

, (- ), .

, : ?

---

, . , :

1. - ( , )
2. , , , / . ( )

---

:

, , , , ; .

, , , , , . ( , , )

, . , ?

? , , - , - , ?

---

: , , , . 5 (, , , flexbox ..). , .

---

: , @Alohci ,

Answer 1

, , , Firefox, - , . Firefox , min-height , . Firefox, .

. 9.5.1 ( ):

4. . , , , . , .

, "" ( ) . , , , , div.

:

, , . , .

• [...]

• , . , .

. , . , , div body , div.

, div , ? body , div , :

html {
  background: red;
}

body {
  margin: 0;
  margin-bottom: 100px;
  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>

Hide result