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

Try this. Just add the overflow:hidden in your css for .box class.

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

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

box-1
box-2