<div class="box box1">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/balloon-sq1.jpg" alt=""> The image has been floated to the left. This box does not have display: flow-root.
</div>
<p>This paragraph follows the box which contains the float.</p>

<div class="box box2">
  <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/12005/balloon-sq1.jpg" alt=""> The image has been floated to the left. This box does have display: flow-root.
</div>
<p>This paragraph follows the box which contains the float.</p>
.box {
  clear: left;
  background-color: #333;
  color: #fff;
  max-width: 500px;
  margin: 0 0 2em 0;
  padding: 1em;
}

p {
  margin: 2em 0;
}

.box img {
  float: left;
  width: 150px;
  margin: 0 10px 10px 0;
}

.box2 {
  display: flow-root;
}

body {
  padding: 1em;
  font: 1.2em/1.4 Arial, Helvetica, sans-serif;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.