CSS floats - layout rules - line boxes keep floats from floating upwards
Floated image doesn't go higher than the top of the line box that contains that image. Lets break it down.
Let's say we have a paragraph that contains left floated image. Based on this link https://www.w3.org/TR/css-inline-3/#l... (please see picture)
there are 2 types of boxes in that paragraph: line box and inline box. As we can see from that image line boxes contain inline boxes. So we can see that the left floated purple image doesn't go above the line box that contains it. So this rule constraints floats within line box thus preventing from going upward too much.