Categories
clearfix cross-browser css html layout

What is a clearfix?

1064

Recently I was looking through some website’s code, and saw that every <div> had a class clearfix.

After a quick Google search, I learned that it is for IE6 sometimes, but what actually is a clearfix?

Could you provide some examples of a layout with a clearfix, compared to a layout without a clearfix?

2

  • 67

    It is not for IE 6. A clearfix ensures that a div will fully expand to proper height to enclose its floating children. webtoolkit.info/css-clearfix.html

    – Sparky

    Dec 18, 2011 at 19:05


  • This 6-minute YouTube video explained it better than these answers IMO youtube.com/…

    – nCardot

    Jul 26, 2021 at 4:22


1032

+100

If you don’t need to support IE9 or lower, you can use flexbox freely, and don’t need to use floated layouts.

It’s worth noting that today, the use of floated elements for layout is getting more and more discouraged with the use of better alternatives.

  • display: inline-block – Better
  • Flexbox – Best (but limited browser support)

Flexbox is supported from Firefox 18, Chrome 21, Opera 12.10, and Internet Explorer 10, Safari 6.1 (including Mobile Safari) and Android’s default browser 4.4.

For a detailed browser list see: https://caniuse.com/flexbox.

(Perhaps once its position is established completely, it may be the absolutely recommended way of laying out elements.)


A clearfix is a way for an element to automatically clear its child elements, so that you don’t need to add additional markup. It’s generally used in float layouts where elements are floated to be stacked horizontally.

The clearfix is a way to combat the zero-height container problem for floated elements

A clearfix is performed as follows:

.clearfix::after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

Or, if you don’t require IE<8 support, the following is fine too:

.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

Normally you would need to do something as follows:

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

With clearfix, you only need the following:

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

Read about it in this article – by Chris Coyer @ CSS-Tricks

14

  • 2

    either way for whatever reason a white space is a better practice than a dot, I have had problems with the dot on some browsers hence why I mentioned it 🙂 a little improvement wont hurt 🙂

    – Val

    Sep 13, 2012 at 8:43

  • 2

    content: "\00A0"; the \00A0 represent a white space, a simple white space does not work well 🙂 sorry. 🙂

    – Val

    Sep 14, 2012 at 13:22

  • 15

    @MadaraUchiha, why is display:inline-block better than floating elements? The only problem I have is that displaying with inline block causes problems with there is whitespace between the tags, which isn’t always easily controllable.

    Feb 27, 2013 at 23:39

  • 2

    @Kzqai: Which is why flexbox is the preferred option when it becomes more widely supported.

    Mar 11, 2013 at 21:05

  • 13

    Disagree that display: inline-block is better than floats for block-based layout. Inline-blocks are, as their name implies, laid inline – most layouts are block-based and having these blocks be laid out in an inline formatting context just doesn’t make sense. You also have to deal with various issues associated with inline formatting, such as inter-element whitespace, other inline elements, sizing, alignment and so on as a lot of others have pointed out. Granted, float layouts don’t make a whole lot of sense either, but at least floats have the benefit of being block-based.

    – BoltClock

    Apr 18, 2014 at 10:00


72

The other answers are correct. But I want to add that it is a relic of the time when people were first learning CSS, and abused float to do all their layout. float is meant to do stuff like float images next to long runs of text, but lots of people used it as their primary layout mechanism. Since it wasn’t really meant for that, you need hacks like “clearfix” to make it work.

These days display: inline-block is a solid alternative (except for IE6 and IE7), although more modern browsers are coming with even more useful layout mechanisms under names like flexbox, grid layout, etc.

2

  • 1

    My practice has come to this that there is no reason to use float ever. Whenever you use it half of the things break. I would only use it when i need things to conjure up inside a div. Inline-block is awesome. New box model is awesome. So no more hacks to go vertical align.

    Mar 14, 2013 at 15:56


  • 51

    inline-block is not a strict improvement over floats because of the inter-block spacing problem, where whitespace in the HTML translates to space characters that separate blocks. inline-block requires workarounds of its own, just like float requires clearfix.

    Jul 31, 2013 at 21:05


46

The clearfix allows a container to wrap its floated children. Without a clearfix or equivalent styling, a container does not wrap around its floated children and collapses, just as if its floated children were positioned absolutely.

There are several versions of the clearfix, with Nicolas Gallagher and Thierry Koblentz as key authors.

If you want support for older browsers, it’s best to use this clearfix :

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

In SCSS, you could use the following technique :

%clearfix {
    &:before, &:after {
        content:" ";
        display:table;
    }

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

If you don’t care about supporting older browsers, there’s a shorter version :

.clearfix:after {
    content:"";
    display:table;
    clear:both;
}

2