Block Formatting Context Created with Overflow

suggest change

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.


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


<img src="">
  <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>


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

Feedback about page:

Optional: your email if you want me to get back to you:

Table Of Contents