Overlapping of floating and non-positioning in-flow blocks and in-flow inlines

Question

When this happens, floats are rendered in front of non-positioned in-flow blocks, but behind in-flow inlines.

I don' t know if my understanding is correct. So, look some examples.

behind in-flow inlines: exist a span and float, float is behind span. I feel this is correct.

.left {
  float: left;
}

.test {
    background: rgba(155, 155, 155, 0.5);
    margin-left: -50px;
    padding: 10px;
    font-size: 24px;
}

<span class="left" style="background-color: red; padding: 10px">
  Some have gone and some remain
</span>
<span class="test">
 In my life, I've loved them all
</span>

But, this sentence floats are rendered in front of non-positioned in-flow blocks, it's a little weird.

float box's background and border are really in front of blocks box. But inner text isn't.

.left {
  float: left;
}

.test1 {
  height: 30px;
  border: 1px solid red;
  background: red;
  margin-right: -30px;
  border: 3px solid green;
  font-size: 12px;
}

.test2 {
  background-color: rgba(155, 155, 155, 0.5);
  margin-right: -20px;
  padding: 10px;
  font-size: 18px;
  border: 2px dashed black;
  font-weight: bold;
}

<p class="left test1">
Some have gone and some remain
</p>
<p class="test2">
In my life, I've loved them all
</p>

As far as the specifications I have read so far, I don't know why, and I'm not sure if my example is correct.

you shouldn't really use floats for layout nowadays - they weren't really created for layout but got abused when there was no better options — Pete, Jan 16 '23 at 13:43
@Pete I know there are a better positioning schemes. However, as a professional front-end engineer, I think it is necessary to know these specifications. — OnlyWick, Jan 16 '23 at 13:48

score 1 · Answer 1 · answered Jan 16 '23 at 14:18

Your example is a good one.

The paint order is

in-flow element borders and backgrounds
float borders and backgrounds
float inline content
in-flow inline content

Below, I've adjusted the colors and font sizes for visual clarity, but it's still essentially the same example. You can see that the in-flow text paints over the float element's text.

See the Elaborate description of Stacking Contexts - Painting order for a more complete picture of what's happening.

body {
  width: 400px;  
}

.left {
  float: left;
}

.test1 {
  height: 30px;
  border: 1px solid red;
  background: pink;
  margin-right: -60px;
  border: 3px solid green;
  font-size: 1.5em;
  color: yellow;
}

.test2 {
  background-color: rgba(155, 155, 155, 0.5);
  margin-right: -20px;
  padding: 10px;
  font-size: 18px;
  border: 2px dashed black;
  font-weight: bold;
  font-size: 1.2em;
}

<p class="left test1">
Some have gone and some remain
</p>
<p class="test2">
In my life, I've loved them all
</p>

Overlapping of floating and non-positioning in-flow blocks and in-flow inlines

1 Answers1