img{
float:left;
width:100px;
margin:0 10px;
}
.div1{
background:#f1f1f1;
/* does not create block formatting context */
}
.div2{
background:#f1f1f1;
overflow:hidden;
/* creates block formatting context */
}
https://jsfiddle.net/MadalinaTn/qkwwmu6m/2/
This example that show how a number of paragraphs will interact with a floated image is similar to this example, on css-tricks.com.
2: https://developer.mozilla.org/en-US/docs/Web/CSS/overflow MDN