<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.