Css floats and its stack order

Question

I am looking at the float property that I recognized earlier, I found a simple problem about floating elements with their own stacking order, code:

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 fully understand that the text will flow around the field that is next to field-1, but when there are 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 .box-1 will overlap .box-2 because it has been moved and taken from a regular document stream.

So my questions are:

• Since the p tag is a block element, it can be considered as a field. but why in example 2 does the p tag move right after box-1 ? but in example 1 there is a completely different behavior?

• This is because the floating point elements have the same stack order as the p tags, and both of them have a higher stacking order than the non-floating box, like .box-2 here?

Answer 1

I am going to add more explanations as I think the accepted answer omitted some important parts and did not give a real explanation. Let's start by defining a float from the MDN Documentation:

The CSS float property indicates that the element should be placed along the left or right side of the container, allowing text and inline elements to flow around . The element is removed from the normal stream of the web page, although it still remains part of the stream (as opposed to absolute positioning).

So yes, the float behaves like absolute positioning, but not exactly, because the element is still part of the stream.

Now both of your examples behave in exactly the same way, the only difference is that in the first you have text. Therefore, the float element does not press p , as you think , but overlap it and click only the text. If you check the item, you will see the following:

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

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

You can find this answer in the drawing order specification . Both elements are not located and one floats:

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

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

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

---

To avoid such things, you have two solutions (as in other answers):

• You clear the float, which is the general solution used to avoid the effect of the element on the floating behavior.

• You make box-2 element of an inline block, because the inline block behaves like inline elements , and also moves with a floating-point element

Answer 2

I believe that I understand now (somewhat). Since they are the same size, and since float: left acts like display: absolute while preserving the text space, it pushes the box-2 text to the bottom.

You can get around this display: inline-block setting for box-2 and interestingly enough by adding it overflow: hidden or overflow: auto .

 .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> 

Answer 3

Try it. Just add overflow:hidden to your css for the .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>