Avoid text wrapping around floatted image

index.html

<div class="container">
  <img class="floatted-image" src="http://placehold.it/350x150" alt="Dummy image">
  <p class="no-wrapping-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas dapibus magna elit, a posuere lacus malesuada sed. Fusce ante metus, congue vel odio vitae, eleifend placerat metus. Suspendisse tempus dapibus mauris id faucibus. Curabitur augue erat, aliquet facilisis sem non, ultrices sollicitudin nulla. Etiam condimentum a nisl ut bibendum. Aliquam tellus nisi, ultrices at ligula eget, euismod tempus leo. Donec pellentesque, tortor et fringilla tincidunt, ex neque ullamcorper risus, quis sollicitudin elit nulla a nulla.</p>
</div>

style.css

.floatted-image {
  float: left;
}

/**
 * The trick here is to use the overflow property.
 * Setting it to 'auto' or 'hidden' prevents the content to wrap
 * under the floatted image when it's higher than the image.
 * Obviously, that could work with any element (not just a <p>), as long
 * as overflow is not used for something else.
 **/
.no-wrapping-text {
  overflow: auto;
}