What is a clearfix?

html

responsive-design

css-hacks

floats

byAnton Shumikhin·Sep 24, 2024

Clearfix is a technique you can use to maintain the expected layout when having floated elements inside a container. Here's the .clearfix snippet applied:

.clearfix::after {
  content: "";
  display: table;
  clear: both; /* Whooosh! The collapse event has been avoided. */
}

This method represents a direct and handy solution for one of the common puzzles of floating – the container collapse.

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.

explain-codes / Html / What is a clearfix?

Linked

Why doesn't the height of a container element increase if it contains floated elements?



Floating elements within a div, floats outside of div. Why?



Make outer div be automatically the same height as its floating content



Float:left; vs display:inline; vs display:inline-block; vs display:table-cell;



What is the use of style="clear:both"?



How to prevent inline-block divs from wrapping?



Why is the parent div height zero when it has floated children?



Unfolding clearfix Exploring when to use clearfix Clearfix alternatives and best practices Practical application of clearfix