Block Formatting Context Created with Overflow

Using the overflow property with a value different to visible will create a new block formatting context. This is useful for aligning a block element next to a floated element.

CSS

img {
    float:left;
    margin-right: 10px;
}
 div {
     overflow:hidden; /* creates block formatting context */
}

HTML

<img src="http://placehold.it/100x100">
<div>
  <p>Lorem ipsum dolor sit amet, cum no paulo mollis pertinacia.</p>
  <p>Ad case omnis nam, mutat deseruisse persequeris eos ad, in tollit debitis sea.</p>
</div>

Result

This example shows how paragraphs within a div with the overflow property set will interact with a floated image.