Trying to understand float and text

Question

I'm trying to understand how float works with different elements. The first example have 2 <div> which is floated to left with one of the div having some text. As expected, both are placed next to each other horizontally.

Example 1

The second example have the same setup except that the last <div> with text is not floated to left. Now, I was expecting that <div> to go underneath the first floated <div>. But, the result is different. The second <div> went beneath the first <div> but the text is placed under the first <div>.

Example 2

Can anyone explain me what's happening?

Answer 1

Because overflow happens for yellow div and default is overflow: visible, text inside the yellow div creates a new block formatting context.
Overflow docs
Block formatting context