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:

.box-1{
  background: teal;
  width:100px; height:100px;
  float: left;
}

<div class="box box-1"></div>
<p> this is the text for the testing purpose<p>
    
    

I totally understand the text will wrap around the the box which is right next to the box-1, but when there is no text elements only two div boxes:

Example 2:

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

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

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

This time the .box-1 will overlap the .box-2 since it was floated and taken from the normal document flow.

So my questions are:

1. Since the p tag is a block element and it could be considered as a box. but why in the example 2 the p tag is moving to the right after the box-1? but in the example 1 there is totally different behavior?

2. It is because of the floated elements has same stack order like p tags and both of them have higher stacking order than the non-floated box as .box-2 here?

Answer 1

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 2

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>