Float Layout - Clearfix

About

A clearfix is a method used in float layouts to constrained the floated element to stay in its container.

Solutions

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;
}





Discover More
CSS - Clear Property

The clear property indicates which sides of an element's box(es) may not be adjacent to an earlier floating box. A clearfix is generally used in float layouts to constrained the floated element...
CSS - Float (box|property) (Layout)

CSS Float is a property of a block box. It shifts a box to the left or right on the current line and create a new position context. flexbox The most interesting characteristic of a float (or “floated”...



Share this page:
Follow us:
Task Runner