#1 — Adub

Besides older, non-compliant browsers, whats the point of the first block of css when you can just use clear:both;? I know that Chris Coyier uses clear:both; all of the time and seems to have little problems with it.

So, in short, my question is this: For compliant browsers, why use multiple lines of css when you can theoretically just use 1?

#3 — Adub

Ah, okay. It seems that the manner used by Chris is slightly different. He appears to use another child to perform the clearing inside the parent, rather then apply the class to the parent itself. Unless I’m mistaken.

#4 — Ryan Williams

Both are valid ways. I tend to lean towards accomplishing the clearing without any extra HTML, therefore I use both the parent and child clearing approaches.

With that said, I’m not fond of verbose methods like Jeff’s and instead prefer to go with the overflow + dimension technique. It’s two lines, and works reliably so long as your CSS is compatible with specifying a width or height on the parent (almost always is in my experience).

#6 — TeMc

That’s right Adub.

If you’re willing to add an extra [div] in your code then clear:both (either inline-styling or css-class) is all you will ever need (for ALL browsers).

However, if you rather have a div-container with in it a float-left and float-right and automaticly clear the float after the second div, then you need to “insert” an extra block-element (*:after’s are display:inline by default), that is both invisible, block-level and clearing the float.

Hm… now that I’m thinking.. I never used the word “Insert” in this context before. Makes me think…. jQuery ?

That’d work too !

$ .clear-fix.parent().append("div class clearboth");

#8 — Rob Flaherty

Instead of using the invalid zoom:1 for IE7 and IE6, why not use display:inline-block for IE7 and height:1% for IE6? Those both trigger hasLayout while still using valid CSS.

Personally I usually use the overflow method for clearing floats nowadays.

#10 — Jaime

I generally use the overflow method since I’m really an advocate of not using unsemantic classes unless completely unavoidable. That said, I do use clearfix sometimes, but I either use it through mixins or I just repeat add the div’s selector to a clearfix code block. It might be a bit more work than just making a clearfix class, but the peace of mind it give me is mind boggling.

Instead of => .clearfix:after {

Id rather do tag.class1:after, tag.class2:after .... {

It keeps the layout in the CSS where it should be.

#11 — Ryan

Thanks for the update. Btw, for IE 7 you can use the selector *+html for targeting. Makes it a little easier to type.

#12 — Vladimir Carrer

Thanks for the update. I will make all the test later for all my CSS Frameworks.

#13 — Paul Irish

Do you even need to target the zoom to only ie6/7 ?
I’d just put zoom inside the main declaration.

#14 — Paul Irish

I obviously don’t read before I post.. sorry.

I’d just do a

.clearfix { *zoom: 1 }

But that’s me and my quick unvalidating hacks.

#15 — kcmr

I use min-height: 0 for IE 7 instead zoom: 1, and height: 1% for IE 6
This is valid CSS and has no effects for other browsers.

.clearfix{min-height: 0;} /* IE 7 */
* html .clearfix{height: 1%;} /* IE 6 */

I also aply this rules to all divs to avoid use continuosly the clearfix class in the HTML code.

div:after{... }
div{min-height:0;}
* html div{height: 1%;}

#16 — Victor Teixeira

hmmm… The clearfix that I use is like this:

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

And the IE6 part:

* html .clearfix {height: 1%;}

#17 — Jorik

What about this? works in all browsers i believe…

.clearfix { overflow: hidden; }
/* ie part */
.clearfix { zoom: 1; }

#19 — Jorik

@jeff
True, that is sometimes a big problem..!

#20 — Justin

Hey Jeff, discovered your blog after picking up your new book with Chris Coyier, great stuff.

Question about the clearfix - it looks like you’re applying it directly to specific elements in your css as opposed to adding the class in the markup. Do you reccommend doing this instead?

#22 — Pete

This is a great method that I’ve been using for a while with no problems: http://www.quirksmode.org/css/clearing.html

#23 — Justin

Thanks Jeff, i’m just getting into WordPress, and I’ve picked up a lot from the book already, it’s been very helpful!

I’ve been using a blank div with a clear="both" until now, but think I’ll give this a try on my next project.

#25 — iPad

Jeff I think you should call it “A cleaner clearfix” instead of “The new clearfix” ;) my 2¢

#27 — a guy

Seems too complicated… I used to use the overflow method, but I just float the parent div, then it wraps all child floats…

so:

div “content” is floated left inside the “wrapper” div. Content div will wrap around the two “left and right” floated divs… so you can add a border etc etc… simple. Works everything for me…

#29 — iVane Hwang

I alway do like this:

.clearfix {zoom:1;}
.clearfix:after {content:""; clear:both; display:block; height:0;}

#30 — Justin

Someone can correct me if I’m wrong, but I think you avoid that because the zoom:1 property doesn’t validate and needs to be fed only to IE on conditional stylesheets.

#31 — Jeffrey

I use

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

html>body .clearfix { display: block; }
.clearfix { display: inline-block; }
* html .clearfix { height: 1%; }

Valid CSS (“zoom” isn’t).

#32 — Nikola

My version:

/* Clear Fix */
.fix:after {
      content: '[.]';
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
}
.fix {
      display: inline-block;
}
/*\*/
.fix {
      display: block;
}

#33 — DRoss

All the retards trying to explain how the clear differently - youre retards who arent good front-end developers. Use clearfix, thank me later - you should have known about this for 3 years.

#34 — Jay

Is this really a new method, or have you just taken what people have been doing for years and removed all references to IE5?

I’m not seeing anything “new” here.

#35 — Victor Nogueira

I don’t know why people care so much about validating their code. To me it’s like an obsessive–compulsive disorder.

Don’t get me wrong, I always validate my HTML/CSS, but I just ignore obviously invalid properties such as “-moz-border-radius” or “zoom”. zoom: 1 is just fine. It doesn’t screw anything, it stays quiet and safe.

I understand coders who avoid non-semantic classes, though. I’m part of this group, but I make some exceptions, as I always use classes like “hidden” (for image replacements) and “clearfix”, as it saves me a lot of time.

Anyway, thank you for the update. I’m already using it.

#36 — Marco

Caring if your css validates is old school and pointless.

#37 — Rod

for me, if div float are inside a div … if the container div has :

overflow : auto;

it resolves ALL. On all browsers.

#38 — Marco

Rod - It adds scrollbars half the time - duh

#39 — Ryan Williams

Keeping code valid is primarily useful for troubleshooting. It may be a bad habit, but I often forget to include a semi-colon or a closing bracket, or perhaps I’ll accidentally use a colon.

This obviously screws up the site, and so the first step is to check the validity of the CSS. If I have to navigate through CSS that contains many validation issues, it takes me considerably longer to do this.

Obviously using one fix like the clearfix technique isn’t going to be too problematic, but if you have a front-end developer who habitually fills his CSS with ‘harmless’ invalid CSS it soon gets frustrating.

And I stand by the assertion that there’s never a need for invalid CSS. If you want to use ‘zoom’ to throw IE into hasLayout, use one of the other valid properties that does the same thing.

Regarding the clearing method as a whole, like I said earlier on I prefer to use ‘overflow: hidden’ (not ‘auto’) and then give it something to throw IE into hasLayout mode such as a width. This can obviously clash with heights, but if you need to clear a parent then it’s exceedingly unlikely you’ll be using a height anyway. Works for 99% of cases in my experience.

#40 — Teddy

Nice way of triggering the hasLayout property in IE using the zoom: 1 property. I have to agree that while height: 1% seems to be a predominant method to trigger hasLayout, it may be problematic under certain specific consequence.

I’m not too concerned about making my stylesheet 100% CSS 2.1 valid since we have moved on to adopting various new properties introduced in CSS3 without making a big mess with browsers that don’t support (they just degrade gracefully, something that I really love). I’m not going to crack my brain just because border-radius or text-shadow fails to validate, so I won’t be too concerned with using zoom: 1 as well.

In the past I was using an empty <div> and making it clear both sides of the float (left and right). Later down the road I focused a little more on proper, valid semantics and so I ditched the empty <div> idea and settled for the handy clearfix method instead.

Sometimes I’ll use the overflow: auto; method but it seems that it only works when you have a predefined width / height for the child elements. When that doesn’t work I’d rollback to clearfix :)

What are your thoughts on overflow: auto;, Jeff?

#42 — Gary

@Teddy,
The difference is, border-radius and text-shadow will be W3 Recommendations in the future, while zoom won’t be.

My current preferred method:

/* Float clearing for IE6: */
* html .clearfix
{
      height: 1%;
      overflow: visible;
}
/* Float clearing for IE7: */
*+html .clearfix
{
      min-height: 1%;
}
/* Float clearing for everyone else: */
.clearfix:after
{
      clear: both;
      content: ".";
      display: block;
      height: 0;
      visibility: hidden;
}

#44 — Gary

I’d disagree that it was a mouthful - minified, it’s only 4 characters more than your suggestion, and mine doesn’t use proprietary styles.

As my CSS validates, then there’s no need to start adding in conditional comments into the HTML to link in ie.css if that’s important to a designer/developer - hence, overall, my solution, on it’s own, is more compact.

I agree that maybe the height: 1% for IE6 would cause issues in some circumstances (none that I’ve come across), but the min-height:1% would struggle to be any more invasive than zoom - you’d need a very edge case.

I’m not sure what the “work of the person” comment was in relation to, and certainly can’t see how it was useful or relevant to the discussion? I’m not a designer, and don’t claim to be. What my sites lack in the visual prettiness mindset that you’re clearly thinking in, I make up with in development aspects in code that you can’t access. Lets stick to discussing the quality of the code - not the quality of the person adding it to the discussion.

#46 — Marco

Gary, clean up your code and grab a tampon!

#47 — james

Hi, This is very nice site & nice articles .

#49 — Sal B

I’ve used overflow:hidden; on the containing element and that usually works out fine.

#51 — Teddy

@Gary: Oooh boy. Here’s a chill pill for you :) anyway, yeap I agree that zoom: 1 is a proprietary property meant for IE but what I personally feel is that it doesn’t hurt to include it even if it invalidates your CSS. I used to be a validation OCD back then but now I’ve learned to let things go, teehee.

@Jeff: Oh yea, the overflow: auto property may give rise to some problems if the content overflows. My bad! I wasn’t thinking straight when I typed that out and I recommend overflow: hidden instead, heh. And speaking of layout problems, overflow do give certain layout inconsistencies across some browsers under certain circumstances (I sound very general here because I forgot how to trigger the problems - I swear I found a ton of them when using the overflow property instead of the height fix). I guess height: 1% is still the way to go. Have a great week ahead yea!

#52 — Florian Purchess

Hey Jeff, I always use http://www.webtoolkit.info/css-clearfix.html in my projects and it’s basic part of my css-lib. In ref of your title: How much do you consider it as new? Why do you prefer inline-table instead of inline-block, which is more common? Greetz, Flo :)

#54 — Ingo Chao

small notes:

- IE7 was already supported. http://ago.tanfa.co.uk/archives/300.html

- Your maintenance work on the old Aslett/PIE hack should at least link to the original method and their authors. /They/ did something “new”.

- “without using hacks” … adding a pseudo-element to a container to let it contain its floats is of course hack. Not to speak from that zoom you are sending to IE.

#56 — Jens Grochtdreis

The idea to drop IE5Mac is okay. You could reduce the last two rules to only one rule. The zoom-property is only understood by IE. And a star in front of a property is only read by IE6 and 7. So why not write:

.clearfix { *zoom: 1;}

BTW: it is possible, that IE8 doesn’t understand “zoom”. Given that we could drop the star, too.

#58 — Jens Grochtdreis

@Jeff: You cannot consolidate the zoom-property into .clearfix:after, because IE6 (and 7?) won’t see it. ;-)

Of course the best way would be to split the rules into a normal stylesheet and an IE-CSS. But sometimes it is best to keep them together os you can easily teach the rules and transport them to another project.

#60 — Ionut Botizan

.clearfix {
          min-height:0;
          height:auto !important;
          height:0;
          }

One definition for both IE6 and IE7, with valid CSS rules and min-height hack:

min-height:0; will trigger hasLayout in IE7

height:auto !important; will preserve auto height for all browsers, except IE6

height:0; will trigger hasLayout in IE6, but won’t affect other browsers, because of the previous rule (which IE6 ignores in this situation)

#62 — Ionut Botizan

P.S.: Check your Gravatar settings. My avatar has a PG (Parental guidance recommended) rating. You should use G (General Audience) if you would like to avoid that kind of profanity appearing on your blog.

#64 — Ionut Botizan

The 2 things I can think about are:

1) The container for the floated elements has overflow set to hidden or auto.
In this case, IE6 will apply the overflow and height rules, so it won’t stretch the container to match its contents. However, if you have overflow set to one of those, then you won’t need to apply the clearfix class, since overflow set to hidden or auto will clear the floats.
So, everything should be ok in this case.

2) The container has a fixed height.
If that’s the case, you might need to use !important in the rule where the container’s height is defined. However, I’m not completely sure that this will be necessary, since floats inside a fixed height container shouldn’t cause any problems. So, once again, you can get away with it by simply not using the clearfix class at all.

…And you were right! That solution is based on the min-height fix for IE6, but I’m not good at names, so I didn’t remembered who came up with that! :D

#66 — Patrick

This is almost exactly what I’ve been doing for the last 2 years. Except I’ve been using: .clearfix {*zoom:1;} and have yet to run into issues with it.

I don’t like the old method of using height to trigger hasLayout because it’s a valid property and I prefer to use valid properties for valid purposes. The proprietary zoom property is perfect for this: I’d never use it anywhere else, so I’ll never run into any cascading or inheritance issues.

#67 — Chris Coyier

This is definitely the way to go for clearing floats. As someone mentioned above, yes, sometimes I opt for a clearing div, but only in circumstances where you’d need to add more wrapping divs than you would clearing divs. For example:

[ ] [ ] [ ]
-- clearing div / --
[ ] [ ] [ ]

is easier then

-- wrapping div --
[ ] [ ] [ ]
-- / wrapping div --

-- wrapping div --
[ ] [ ] [ ]
-- / wrapping div --

But that’s not my main point here. I wanted to say that Dan Cederholm has been spreading a clever alteration to this and that is to call the class name “group” or “container” rather than “clearfix”. I know it kinda feels like an irrelevant wording change, but that’s what semantics basically is. To me, it just FEELS better wrapping stuff in a div called “group”. It feels like you are doing it for organization rather than a “fix”.

#68 — gaowhen

As I know, IE6/7 can be targeted by *. So, maybe this method can be written like this :

.clearfix:after {
       visibility: hidden;
       display: block;
       font-size: 0;
       content: " ";
       clear: both;
       height: 0;
       zoom:1;
}

I wonder why you choose such a complex method to target IE6/7.

#70 — gaowhen

sorry I made a mistake. I should use zoom:1 to trigger the haslayout of .clearfix, not the .clearfix:after. So it should be like this:

.clearfix:after {
       visibility: hidden;
       display: block;
       font-size: 0;
       content: " ";
       clear: both;
       height: 0;
}
.clearfix{*zoom:1;}

How about this one?

#72 — Martin

In most cases .clearfix { overflow: hidden; zoom: 1; } is all I need. The zoom is moved to a dedicated CSS file for those obsessed with validation.

#74 — Martin

Of course Jeff, you know it’s know the zoom property which is doing the “clearing”.

I simply prefer this solution to yours because it’s less obtrusive (although the obtrusion is not visible and works just as fine).

It all boils down to the personal preferences and the layout-in-development.

#76 — Martin

Uhh, I only hope we understand each other correctly ;)

Back in the days I used to manually insert a clearing span after the floats I wanted to clear, which was my bulletproof and cross-browser implementation of the :after trick.

But lately I am very much into overflow: hidden;, which is much simpler, and allows a container to have as many floats inside it and still not loose its height, meaning that it acts as a float clearer. So all we just add the zoom for the IE.

I am sure you know everything I’m talking about here, but for illustration purposes, here are some live examples I just sketched up: http://martin.saulis.com/test/floats.html

So, I am not arguing the different tricks to achieve a desired result — I am solely expressing my opinion on the advantages of using a simpler approach ;)

#78 — Jaime

@Jeff: “In most cases .clearfix { overflow: hidden; zoom: 1; }” I think he made it pretty clear he was talking about using the overflow: hidden method, while using zoom for ie only.

#80 — Jaime

Lol no kicking needed I believe. For what it’s worth I rather just add clearing rules to individual selectors via mixins with whatever your preference in css frameworks is. keeps everything 101% semantic and is easier to maintain than using a clearfix class.

#81 — Eric Hobart

Can I get some opinions re this clear technique…I’m using it with success:

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

thanks for you input,
Eric

#82 — Jens Grochtdreis

@Eric: Please try next time to read the article first and then post a comment. If you had read the article you would have recognized, that you posted a part of the original clearfix-hack which the article discussed top modernise. Reading and thinking doesn’t hurt, you know?

#84 — tanya singh

I don’t use clear fix, learned to avoid that piece

#85 — Martin

@tanya singh:

I find it hard to believe that, unless you’re not using floats — and they’re the most commonly used layout modifying properties!

#86 — paul

hmm, I’m using the clearfix on a continre div ith 4 floated div inside and in IE7 it didnt hae ny effect
I had to use overflow:hiddennn

#87 — Know

I don’t use clear fix too!

#88 — Monsoon

Thanks a lot for this article, really helped me out today! Tried a couple of other clearfix-solutions, but this was the best one, cheers.

#89 — Andiv Sites

Sometimes a lot better to leave as is Tk. Thank you! Great post!

#90 — Clares

I was going to mention this line of thinking in the article, but I knew that I would have the chance to do it in the comments

#91 — JohnONolan

This line does NOT work, it triggers a bug in Firefox 3

content: " ";

This needs to remain (as in the old version) as content: ".";

#93 — avajayam

It’s a complex way to fix float bug. Actually browser will work smoothly when use overflow in simple html or use additional div with clearence in complex html. Becare, the additional Clearfix class will burden the browser, like up two way. So hard to get a perfect way to fix bug when browsers are ugly.

#94 — Sake

I used overflow:hidden (and auto) for a couple of projects and had some unpleasant surprises later when the client printed some of their content-heavy pages. If the content div is long and the printed content would go over one page, only the first page of content would be printed and all the remaining pages would be empty. So, back to clearfix.

#95 — Luc

@Jeff Starr - I had exactly the same issue as @johnonolan - the empty content:" "; rule gave a load of weird layout issues in FF3.6 - adding the period back in fixed it all…

#97 — JohnONolan

@Jeff it basically totally stops the clearfix from working and stuff goes floating all over the place - I’m on Mac FF if that makes any difference (it shouldn’t though)

#98 — Andee Know

For a long time searched for something similar. Thanks!

#99 — cyrylski

that was very helpful, indeed. thanks a lot!

I tried overflow:hidden but it still screwed up my layout. It’s fine and dandy now :)

My question is if this is really a fix (meaning a remedy to the cause of a problem), or rather a fix (meaning work-around to cover up a pile of mess)? :D

#100 — serzhiio

Thank you, clearfix solved my problem!

#102 — Andiv

The strength of this method - its simplicity. After all, as they say - all brilliant - just.

#103 — GreLI

Why so difficult? It can be done much easier:

/* new clearfix */
.clearfix:after {
     clear: both;
     display: block;
     height: 0;
     content: "";
     }
*html .clearfix { zoom: 1 } /* IE6 */
*+html .clearfix { zoom: 1 } /* IE7 */

#105 — Thierry Koblentz

fwiw, my advice is to avoid using “clearfix”, because it has the potential to create more issues than it can solve.

http://carsonified.com/blog/design/everything-you-know-about-clearfix-is-wrong/

#107 — Martin Chaov

Or you can just use overflow: hidden; on the container as listed in specs (http://www.w3.org/TR/CSS2/visuren.html), and never again use hack to fix issues that do not exist…

#109 — Martin Chaov

@Jeff Starr,

There are several known case when one could or need to use another method of clearing floats, but as I’ve said before - overflow:hidden; fixes most common cases and by specification must be used on containers with floated children.
Have I mentioned that as this is from the box model specs it is supported even by our beloved IE6 (also lesser versions but they do not concern us).

There isn’t need for different methods and their shortcomings :).

two simple ways of clearing floats - clear: both assigned to the element that goes after your floated queue, if the case is special and overflow: hidden; on the container when the case is general.

#110 — Ali

I’d go with overflow + dimension.

#112 — Marc Watts

The best way to use a clearfix can be found at best clearfix ever. It doesn’t use class names to fix the problem but an automatic solution that should be applied to all block level elements except for the p and footer elements.

#113 — Thierry Koblentz

@Marc

Best clearfix ever? You must not be serious.
Do you understand that your rules will create very different constructs across browsers?

For example, you give a layout to DIVs (div {zoom:1;}) but these do not create block formatting contexts in modern browsers.

Try to nest a bunch of DIVs and apply vertical margins to them, you’ll see that in IE 6 and 7 these margins will *not* collapse.

Check everything you know about clearfix is wrong to understand why your rules will break many layouts.

#114 — August

Are comments working again?

#116 — Thierry Koblentz

@Jeff

Regarding Jonathan Snook’s tweet. I believe this is not really related to the issue since “overflow:hidden” is not a technique, but a trigger.
The technique itself has to do with block formatting contexts, so authors can implement the method using other triggers.

In short, it is not clearfix vs. overflow:hidden it is clearfix vs. block formatting contexts

Also, if overflow:hidden affects printing then authors can easily reset this styling in their print styles sheet.

Lastly, overflow:hidden does not always cut-off content outside the element’s boundaries. It really depends on constructs.

#118 — Thierry Koblentz

@Jeff

I agree, there is nothing authors should disregard. It’s a jungle out there and we need all the tools we can put our hands on.

I use the clearfix method myself, but in very rare occasions.
My addition to this technique is the use of padding declarations (padding-top:1px;padding-bottom:1px;). This is to make sure the vertical margin of the first and last child of the block will not collapse in modern browsers. I added this to the original rule because zoom:1 prevents margin collapsing. That way things look the same in all browsers.

#119 — Marc Watts

@Thierry Koblentz

Thanks for your reply. I have seen your article on carsonified.

I just briefly checked it out again so correct me if I am wrong but you have 3 div elements with the two sides ones floated and the one in the middle is not floated.

To fix the problem that you have shown, you just need to float the middle div. Unless your using liquid layouts (which I don’t see anyone using anymore), then I see no reason why you wouldn’t float the middle div.

If you do then my technique still works. I suppose this means that I create websites in such a way that it works with my clearfix solution.

#120 — Thierry Koblentz

@Marc Watts

If I pointed you to the article it was not in relation to a particular layout, but to what this method does to blocks.

You are giving a layout to all these elements:
article, aside, div, form, header, nav, section, and ul

This is what this means for IE 6 and 7:

1. these blocks will contain floats,
2. the border box of these blocks will not overlap floats,
3. the vertical margin of the first and last child of these blocks will not collapse.

In modern browsers, your styling will only trigger #1.

But #2 is the killer here, because - in these blocks - clearing a nested element will clear outside of the block in modern browsers, but not in IE.
For the same reason, the border box of these blocks will be different across browsers.

If you do then my technique still works. I suppose this means that I create websites in such a way that it works with my clearfix solution.

If your technique works (which I doubt) the way you create web sites, then it may be the best method for you, but it’s certainly not “the best clearfix ever” (as you claim).

#121 — Marc Watts

@Thierry Koblentz

Thanks for your reply again.

Would you have an example website that you think would break my clearfix? I’ll need to do some tests to check what you are saying. So far I have had no problems using the fix.

I may have to look into this further.

Marc

#122 — avajayam

Hi，someone find a bug in ie7(I think it is not about float, but hope the new clear can fix it, because additional clear div can fix it), cann’t give the margin-bottom 10px yet. The code as follow:

Try

.clearfix:after {
       visibility: hidden;
       display: block;
       font-size: 0;
       content: " ";
       clear: both;
       height: 0;
       }
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

#123 — avajayam

sorry the > < be clear

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Try</title>
<style type="text/css">
.clearfix:after {
       visibility: hidden;
       display: block;
       font-size: 0;
       content: " ";
       clear: both;
       height: 0;
       }
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
</style>
</head>
<body>

<div style="width:600px;border:1px solid #69C;" class="clearfix">
       <div style="width:480px;height:24px;background-color:#69C; margin:10px; float:left;"> </div>
</div>

</body>
</html>

#124 — Marc Watts

If you’re having problems with vertical margins then I would recommend using padding instead. It eliminates any collapsing problems.

#125 — Thierry Koblentz

@avajayam

This is a IE6/7 bug. afaik, to create space below the float you’d need to use padding on the wrapper rather than margin on the float.
Note that this has nothing to do with margin collapsing.

#126 — avajayam

Thanks Marc and Thierry(Great).

#127 — Website design chennai

Thanks to Jeff Starr sharing about new The New Clearfix Method..Fine

#128 — Dawn

I’m sorry to ask such a newbie question but my head is swimming. How does this work out in the HTML?

This works for me in Firefox but I don’t know if this works in IE.

<a href="index.html" rel="nofollow">Home</a>
<a href="../store/index.html" rel="nofollow">Store</a>

<!-- end of navigation div -->

or should I say

Thank you.

#129 — Dawn

Sorry. Code didn’t work after I hit submit button, I’ll try again.

In HTML would I use:

<div id="navigation.clearfix">
     <ul id="navigation">
     </ul>
</div>

or

<div id="navigation.clearfix:after">

Lastly, how are people able to type the lesser than and greater than symbols?

Thank you.