Clear property

The first usage of float was to let float an image (left or right) in a text that contains several paragraph. The floating element is then no more contained to allow this configuration.

For normal text flow, this behavior is great but for layout purpose, it's a major problem because normally, you want that your image stays in its element container. In order to resolve this, the clear property must be applied to a block-level element (to be part of a normal flow) just before the end of the container element.

This is called a clearfix and you can apply it with a class defined as:

.clearfix:after {
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

<div class="item">
 <img src="bigimage.gif" style="float:left;">
My beautiful image
 <div class="clearfix">&nbsp;</div>
</div>

With Group

Another clearfix version with a group class defined as below

.group {
    display: inline-block;
}
.group {
    display: block;
}
.group:before,
.group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}