floats and Stacking Context

Question

As background, below are the two relevant sections from W3C's CSS2.1 specification, chapter 9.

Within each stacking context, the following layers are painted in back-to-front order:

1. the background and borders of the element forming the stacking context.
2. the child stacking contexts with negative stack levels (most negative first).
3. the in-flow, non-inline-level, non-positioned descendants.
4. the non-positioned floats.
5. the in-flow, inline-level, non-positioned descendants, including inline tables and inline blocks.
6. the child stacking contexts with stack level 0 and the positioned descendants with stack level 0.
7. the child stacking contexts with positive stack levels (least positive first).

...and this:

Within each stacking context, positioned elements with stack level 0 (in layer 6), non-positioned floats (layer 4), inline blocks (layer 5), and inline tables (layer 5), are painted as if those elements themselves generated new stacking contexts, except that their positioned descendants and any would-be child stacking contexts take part in the current stacking context.

Questions

• When we say that a "new stacking context" is generated by an element, does that mean that ONLY itself and its descendant (child/containing) elements are ordered in accordance to the new stacking context, and that that whole new stacking context is ordered (atomically) withing the root's stacking context (assuming no other contexts)?
• In the code below, I have a float, non-inline/non-positioned descendants of root, and inline-level/non-positioned descendants. Regardless, the float is not painted on top of the non-inline-level (block-level) box, as the spec seems to say it should. Only the background is painted on top of. Why is that?

.float {
  background-color: red;
  margin-right: -25px;
  border: 5px solid green;
  float: left;
  color: gray;
  font-size: 5rem;
}
.old {
  background: aqua;
  font-size: 3rem;
}
.new {
  background: yellow;
  font-size: 3rem;
}

 <span class="old">tesssss</span>
 <div class="float">testTwo</div>
 <div class="new">foo</div>

Answer 1

For the second question if we check the painting order we will have this order:

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

So now we have painted the background color of the block element .new

5. All non-positioned floating descendants, in tree order. For each one of these, treat the element as if it created a new stacking context, but any positioned descendants and descendants which actually create a new stacking context are considered part of the parent stacking context, not this new one.

So now we have painted all the element .float (background and content) because it creates it own stacking context. So we should paint everything inside it considering the painting order rules then we move to the next elements.

7. Otherwise: first for the element, then for all its in-flow, non-positioned, block-level descendants in tree order:
   1. ...

At this step we will paint the content of the .new element and the inline element .old

---

So the trick is that the .new element is painted in two different steps, first it's background and later it's content. Between these steps we painted the floated element.