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;
}

<div class="box box-1">box-1</div>
<div class="box box-2">box-2</div>

Answer 2

I am going to add more explanation as I think the accepted answer omitted some important parts and didn't provide a real explanation. Let's start with the definition of float from the MDN documentation:

The float CSS property specifies that an element should be placed along the left or right side of its container, allowing text and inline elements to wrap around it. The element is removed from the normal flow of the web page, though still remaining a part of the flow (in contrast to absolute positioning).

So yes float behave like absolute positioning but not exactly because element is still a part of the flow.

Now both of your examples behave exactly the same, the only difference is that in the first one you have text. So the float element doesn't push the p like you think but overlap it and push only the text. If you inspect the element you will see this:

So p is a block element and behave exactly like the box-2 in your second example and the floated element box-1 is above it. This confirms that in both examples we have the same thing but in the first one we have text inside the block element p and unlike absolute positioned element, floated element pushs text as described above.

Now why the floated element is above the p tag and above the box-2?

You can find this answer within the specificaton of the painting order. Both elements are not positioned and one is floated:

4. For all its in-flow, non-positioned, block-level descendants in tree order: If the element is a block, list-item, or other block equivalent:

5. All non-positioned floating descendants, in tree order.

As we can see, we first draw the in-flow element in the step (4) (in your case the p tag and the box-2) then we print the floating ones in the step (5) (the box-1).

---

To avoid such things you have two solutions (like provided in other answers):

1. You clear float which is a common solution used in order to avoid element being affected by the floating behavior.

2. You make the box-2 an inline-block element because inline-block behave like inline-elements and they are also pushed by floated element

Answer 3

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
}

<div class="box box-1">box-1</div>
<div class="box box-2">box-2</div>