css floats and its stack order

Question

I am reviewing the floats property which i learned before,I found a simple issue about floated elements with its own stacking order, the code as:

Example 1:

Answer 1

I believe I understand the issue now (somewhat). Because they have the same dimensions, and because float: left kind of acts like display: absolute while maintaining text space, it's pushed box-2's text to the bottom.

You can get around this setting display: inline-block for box-2 and interestingly enough, putting an overflow: hidden or overflow: auto also fixes it.

.box {
  width:100px;
  height:100px;
}

.box-1{
  float:left;
}
.box-2{
  background:blue;
  overflow: auto
}

box-1
box-2