paragraph's text does not render below floated image but paragraph itself does

Question

Please consider following snippet of HTML and CSS

p{
    background-color: chartreuse;
    text-align: justify;
}
img{
    float: right;
    background-color: transparent;
    margin: 0 0 0 10px;
}

<!--note this image has transparent background -->
<img src="http://i.imgur.com/Qvcvk8i.png" alt="">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur autem reiciendis similique sapiente tempore nulla illo atque, eius cum. Nemo, blanditiis quasi. Ea reprehenderit magni officia, eligendi sint, rerum ex error in? Voluptas maiores, iure quo, tempore ipsa suscipit qui, reiciendis ea veritatis quis maxime, tempora dolor. Voluptatibus accusantium, deserunt vero perferendis reiciendis aperiam natus dicta officiis cupiditate voluptatum veniam non quisquam illo aspernatur enim dolor doloribus maxime nostrum accusamus mollitia incidunt in sit. Accusamus eligendi corporis libero, qui deleniti quisquam laudantium ipsam nostrum minus, cupiditate aut ratione, voluptatibus delectus ea error recusandae! Officiis maxime delectus ad enim quasi deserunt reiciendis autem non veniam. Doloremque non commodi deleceiustus ab, perspiciatis labore! At porro illo suscipit, nesciunt nobis. Quasi non ratione, dolorum hic, soluta saepe vel pariatur modi blanditiis harum omnis! Voluptatibus non, expedita atque! Quod sapiente aliquam distinctio eius? Neque magnam temporibus dolore et officia atque hic, facilis. Ut alias numquam ab, odio voluptates vitae molestias possimus recusandae eos incidunt voluptatibus earum excepturi hic explicabo, nulla sequi aperiam impedit quos nam sit commodi nesciunt atque dolore quam. Doloremque optio suscipit cumque, ducimus similique repellendus molestiae, deserunt autem quis quo sed minus, iure voluptatem molestias, vel quod qui vitae ut voluptatum!</p>

(please open this snippet in Full Page)
as you can see that paragraph is streching below image, background colour of paragraph proves it. So my question is why not the text?

Answer 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.)