What is a clearfix?

Unfolding clearfix

In the evolving world of CSS, clearfix marks a game-changing technique for dealing with floating oddities. It permits parent containers to wrap correctly around floated elements, maintaining their original height and preventing layout misinterpretations.

Exploring when to use clearfix

Floats - The infamous disruptor

Floats, though excellent for text wrapping around images, aren't ideally suited for laying out entire pages. Using clearfix to tame floats helps maintain document flow and avert unexpected collapses.

Meet the modern crusaders - Flexbox and Grid

Reliable techniques like Flexbox and Grid offer modern and powerful layout models, diminishing the reliance on hacks like clearfix.

The reign of Flexbox and Grid

Opting for a Flexbox or Grid layout not only offers robust controls on design but also provides a consistent and predictable behavior across various browser environments.

Clearfix alternatives and best practices

On the horizon - display: flow-root

Here comes display: flow-root, an innovative property enabling float-containing boxes without the need for a clearfix hack or extra markup.

Mind the gaps with inline-block

While display: inline-block is another alternative to floats, remember to keep an eye on whitespace and vertical alignment issues prevalent across some browsers.

Sass and SCSS - Keep it DRY

With preprocessors like Sass or SCSS, create a @mixin or a %clearfix to keep your code DRY and easy to maintain.

A nod to the past - legacy support

Be aware that the zoom: 1; trick can enable hasLayout in IE6/7, however, these are fortunately relics of a bygone era and accommodating to them is largely unnecessary in modern design strategies.

Practical application of clearfix

A commented example demonstrating clearfix usage:

.clearfix {
  &::after {
    content: "";
    display: block; /* Looks like an empty block, acts like a superhero! */
    clear: both; /* Bye bye, float issues. */
  }
}


Using the .clearfix class inside your box containing any number of floated items allows fluid rendition of designs:

<div class="clearfix">
  <div style="float:left;width:50%;"></div>
  <div style="float:right;width:50%;"></div>
</div>


This structure ensures that regardless of the amount of floated content, the parent container accommodates them aptly.