Paragraph's Text Does Not Render Below Floated Image But Paragraph Itself Does

Please consider following snippet of HTML and CSS (please open this snippet in Full Page) as you can see that paragraph is streching below image, background colour of paragraph pr

Solution 1:

The whole point of floating is for text to wrap around the floating element. If the text didn't wrap, and instead flowed over the floating element as though it were not there, then the concept of floating would be meaningless.

The background flows under the floating element because it is not text; it is layout. A floating element has no effect on its surrounding layout; its only purpose is for text, and other floats, to wrap around it. (People have been abusing floats for pseudo-layouts for well over a decade, but that's a separate issue.)