Clearfix

[TheFilmGod]

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

 

I have always used <div class="clear"></div>, but now I'm creating a professional website and I want to use the best methods out there. cleafix is clearly the best way to clear floats.

 

I'm a bit confused though. I use <div class="clear"></div> for everything. From clearing images, text, headings, everything! How do I apply it to all those elements if they don't have an encompassing parent div? Sometimes I have an image, a heading and a clear. Where do I apply the clearfix?

[haku]

I don't use the clearfix myself, I use overflow:auto on the containing element.

 

If there isn't one, then put the whole thing in a wrapper, and add it to that. Or else maybe try adding overflow:auto to the body - never done it myself, but it should work.

[dbrimlow]

You need to include your id or class along with ".clearfix:after". Remember, ":after" is just a pseudo element. All it does is put the commands you designate "after" the named select(s).

 

For example, say you have a class ".navbar" and an id "#content" that you also want to auto-clear  ... simply include them once as follows and every instance of using the select will auto clear:

 

 

.navbar:after, #content:after, .clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
<!-- making this work in IE6 -->
* html .navbar, * html #content, * html  .clearfix {height:1%}
<!-- making this work in IE7 -->
*:first-child+html .navbar, *:first-child+html #content, *:first-child+html .clearfix {min-height:1px}

 

In the html the paragraphs below will now auto clear without additional markup:

<div class="navbar">lorem Upsem blah, blah</div>
<p>lorem Upsem blah, blah</p>
<div id="content">lorem Upsem blah, blah</div>
<p>lorem Upsem blah, blah</p>

 

The IE hacks are necessary.

IE6 does not support the :after pseudo element and floats are unstable (may not contain the floated box contents, auto stretch the dimensions, etc) because "hasLayout is set to false by default on floats.

So you need to "trigger hasLayout" using the star hack and designating a height of 1% to allow the float to contain and conform to its stated dimensions, not permit content to auto-stretch the container and clear either side.

 

So for IE6 the star hack is:

 

* html .navbar, * html #content, * html  .clearfix {height:1%}.

 

Now IE7 fixed the bug that allowed the star hack to work (of course not fixing the reason it was necessary in the first place). So this hack will not work.

 

And IE7 DOES support the :after pseudo element, but once again "hasLayout" still needs to be triggered. Yet, since the star hack won't work, someone realized they can use another pseudo element (":firstchild") to force IE7 to trigger hasLayout. IE7 also uses min/max so the height to trigger hasLayout can be set to min-height:1px:

 

*:first-child+html .navbar, *:first-child+html #content, *:first-child+html .clearfix {min-height:1px}

 

Without the two hacks you are taking a chance of IE blowing up or not on floats.

[TheFilmGod]

Thanks dbrimlow, for the great post! I have a few questions.

 

It isn't necessary to add a parent div to enclose the floats, right?

Will IE7 have a height 1px larger than FF because of the min-height: 1px; delcaration?

 

Let us say I have this html code:

<img src="images/filler.png" width="20" height="20" alt="Filler Image />
<h2>Header Text</h2>

 

Where would I insert the clearfix class to clear the two elements? Do I need to know which element is longer to clear it properly? If the two elements were dynamic and sometimes the left side was longer than the right side, and sometimes it was vice versa, would the clearfix still work?

 

Thanks for all the help!

[dbrimlow]

It isn't necessary to add a parent div to enclose the floats, right?

 

Not at all. I initially showed you the "auto clear" method. That assigns the clear to a wireframe select or container class or id.

 

It will auto clear a floated element if used within a floated container or non-floated tag next to a floated container.

 

Where would I insert the clearfix class to clear the two elements?

It depends on what is floated.

Do I need to know which element is longer to clear it properly

No ... that's what makes it is auto clearing. But, you need to set the class on the block or tag that is floated. This way it

 

If the two elements were dynamic and sometimes the left side was longer than the right side, and sometimes it was vice versa, would the clearfix still work?

 

Are we talking about two floated elements side-by-side? This is where it gets tricky and actually works right in IE and NOT in Firefox and needs tweaking.

 

Here is a link to an example of this that I did a while ago - it is three left floated paragraphs followed by a header3.

 

Without adding a parent div with margins and paddings, the header3 wants to visually tuck up under the first paragraph. It is cleared on left and right properly, but it simply needs tweaking of the h3 element to get it to work - too lazy to tweak this old site, I simply added a parent to contain the three paragraphs and set bottom margin and padding to push the header3 down a bit ... I would do it differently now, but the idea is the same - MARKET TRENDS is the header3 and the three managers are the left floated paragraphs .

float and cleared

 

 

 

[jcombs_31]

I don't use the clearfix myself, I use overflow:auto on the containing element.

 

If there isn't one, then put the whole thing in a wrapper, and add it to that. Or else maybe try adding overflow:auto to the body - never done it myself, but it should work.

 

I concur!  I've found this to be the best method that is the easiest to implement.

[TheFilmGod]

I don't use the clearfix myself, I use overflow:auto on the containing element.

 

If there isn't one, then put the whole thing in a wrapper, and add it to that. Or else maybe try adding overflow:auto to the body - never done it myself, but it should work.

 

I concur!  I've found this to be the best method that is the easiest to implement.

 

It may be really easy to implement, but doesn't that undermine the entire principal of using the clearfix in the first place? If there isn't a wrapper (usually there isn't for me) then you need put an extra wrapper/div in the markup! That defeats the purpose of the clearfix which is suppose to eliminate any extra markup.

 

If you're going to add a div why not just add "<div class="clear"></div>" instead of an entire wrapper?

 

I don't know. I thought this was suppose to decrease the weight of markup, but clearly it doesn't.

 

I'll do what dbrimlow said.

[haku]

The clearfix adds its own markup anyways:

 

.clearfix:after {

    content: ".";

    display: block;

    clear: both;

    visibility: hidden;

    line-height: 0;

    height: 0;

}

 

It's adding a period. Adding an extra wrapper div granted adds markup, but it's semantic markup, as it's a wrapper div, and it's wrapping.

 

Still wondering if adding overflow:auto to the body won't work fine itself.

[haku]

I just decided to try it out myself.

 

The body automatically contains floated elements, so there is no need to use overflow:auto on it. Which means that you would never need a wrapper in order to use overflow:auto. If the floated elements are top level, then they body will enclose them. If they aren't top level, you can use overflow:auto on the containing element.

[dbrimlow]

I don't use the clearfix myself, I use overflow:auto on the containing element.

 

If there isn't one, then put the whole thing in a wrapper, and add it to that. Or else maybe try adding overflow:auto to the body - never done it myself, but it should work.

 

I concur!  I've found this to be the best method that is the easiest to implement.

 

overflow:auto indeed works, but of course the problem with it is that it adds horizontal scrollbars depending upon the screen res, window size or float's content - particularly when using an elastic layout - and by now everyone should at least not be using fixed font-sizes and container heights.

 

There are three recommended clear methods:

 

1. Use a float to fix a float (floats will contain embedded floats - of course you still have the parent float to clear)

2. clear fix method (most often recommended by professionals because it works without artifacts)

3. overflow:auto (can result in on-page scrollbars), overflow:hidden works the same way, with no scrollbars, but can clip images, forms, graphics, etc.

 

I don't know why people shy away from the clearfix. It is easy to remember (once you are used to it) and can be used once to apply to all floats needed to be cleared.

 

The damn IE hacks are annoying with most of us today using separate hack management IE only css pages.

 

Apparently you can just eliminate the IE6 and IE7 hacks by simply designating "zoom 1" for the select in your IE-only css (I haven't tried it yet but I know people who use it):

remove this from your main css page:

<!-- making this work in IE6 -->
* html .navbar, * html #content, * html  .clearfix {height:1%}
<!-- making this work in IE7 -->
*:first-child+html .navbar, *:first-child+html #content, *:first-child+html .clearfix {min-height:1px}

Put this in your IE only css sheet(s):

 

.navbar, #content, .clearfix {zoom: 1}

[haku]

I've not found overflow:auto to add scrollbars to anything I've applied it to yet, and I've used it quite a few times. I don't really have a problem with the clearfix method, and I will use it if overflow:auto adds scrollbars at some point, but it just seems a lot easier to me to use the overflow:auto method.

[TheFilmGod]

I still don't understand why overflow: auto; is a proper solution. You need to add a wrapper (unless there's already one).

 

Haku, you suggested adding overflow: auto; to the main body div - however, this would only clear the first generation childs of the body div. Adding an extra wrapper seems pointless and undermining the idea behind a "clearfix".

 

Why not just add a div: <div class="clear"></div> ?

[haku]

You don't need to add a wrapper to anything - you just add overflow:auto to the element containing the floated element. No need for extra markup.

 

As I mentioned in my last post, I looked at using overflow:auto on the body, but it's unnecessary, as the body automatically contains all the floated elements inside it, so even if top-level elements are floated, you will be fine. And everything that isn't top level will be contained inside another element, so you can add overflow:auto to the containing element.

[dbrimlow]

Why not just add a div: <div class="clear"></div> ?

 

Because it is ADDING empty unnecessary code to your markup (the goal is to reduce code bloat and automate tasks). The clearfix is easy and automatic .... once you get it down ... and only need be set in the css once.

 

Haku, chances are you have either not looked at your page on various monitors with varied screen resolutions, and/or you've been lucky and have not over-extended your floated containers.

 

Once someone views the page at 800 x 600 (or less), or increases the browser text size once or twice, the scrollbars will showup.

 

Also, Think of an element that is absolute positioned, its height is set to 300px, width is set to 500px, overflow:auto and visibility:hidden.  In the good old days (and in Macromedia apps Dreamweaver/flash) this was called a "Layer".

 

When used in html, it will only create a visible box 500px wide and 300px high - regardless of the content. If the content within exceeds 300px, the html auto-generates a vertical scroll-bar, if the width exceeds 500px it auto-generates a horizontal scroll-bar.

 

This is what "overflow:auto" DOES, creates scrollbars to allow the overflow content to be viewed.

 

 

[bronzemonkey]

@FilmGod: if you have no container then you are hardly ever going to find a use for clearfix, since you can just use {clear:both;} on the next element in the source. The whole point of clearfix is to clear a float container.

 

I don't use the clearfix myself, I use overflow:auto on the containing element.

 

I don't like using overflow auto/hidden because sometimes it produces scrollbars or you want to have overflow set to visible. The benefit of clearfix is that it doesn't have any other effect and it is completely robust. At the moment I just prefer to keep all the code for this behaviour together in one place. It's a crucial bit of behaviour and I find that organising it helps me better visualise what is going on in a site. That's not to say that I might not change my mind over time!

 

In the html the paragraphs below will now auto clear without additional markup

 

But it's not very useful in that situation since you can just as easily use clear:both.

 

Where the clearfix variants are useful is in self-clearing an element so that it completely wraps the floats it contains. Classic uses are in the navigation (where list items are floated) and on the containing element of floated columns. If you don't use clearfix then you can't apply a background to the parent and top-margins on elements below will disappear behind the floats.

 

-------------

 

IE's hasLayout is not triggered on any element by default, until you apply styles that trigger it (e.g. width, height, zoom etc). When you have floated columns or nav items, they almost always have specific widths set and so they will have "layout". The trick (in terms of this desired clearing behaviour) is triggering hasLayout on their container so that it will wrap the floated children.

 

Neither IE6 nor IE7 support the :after pseudo element but they will force an element to wrap it's floated children (incorrectly, in terms of the spec) if the element "hasLayout".

 

IE6 can use styles like {zoom:1}; IE7 also supports {min-height:0;}. I prefer to put any IE styles in conditional stylesheets...but technically the IE7 styles can go in your normal declarations since {min-height:0;} is the default value for min-height. It has no affect at all on other browsers so you don't even need the IE7 targeting selectors. So it's down to how rigorously you want to separate the styles that are only required for IE7 from the styles that target standards compliant browsers.

[TheFilmGod]

@FilmGod: if you have no container then you are hardly ever going to find a use for clearfix, since you can just use {clear:both;} on the next element in the source. The whole point of clearfix is to clear a float container.

 

As simple as this sounds, this is simply genius!