Block Formatting Contexts

Using the overflow property with a value different to visible

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 */
}

(opens new window)

https://jsfiddle.net/MadalinaTn/qkwwmu6m/2/ (opens new window)

Using the overflow property with a value different to visible (its default) will create a new block formatting context. This is technically necessary — if a float intersected with the scrolling element it would forcibly rewrap the content.

This example that show how a number of paragraphs will interact with a floated image is similar to this example (opens new window), on css-tricks.com.

2 (opens new window): https://developer.mozilla.org/en-US/docs/Web/CSS/overflow (opens new window) MDN

Remarks

[A block formatting context is a part of a visual CSS rendering of a Web page. It is the region in which the layout of block boxes occurs and in which floats interact with each other.][1]

[1]: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context (opens new window) MDN