clearfix after floating elements with pseudo element

Question

I have three floating div-containers but the clear-fix-solutions I found on other websites don't work. I think I am doing something wrong but don't know what.

How do I write a correct clearfix?

Here is a fiddle:

http://jsfiddle.net/h23A5/

HTML:

<div class="box"></div> 
<div class="box"></div> 
<div class="box nomargin clearfix"></div>

And CSS:

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

Answer 1

A "clearfix" on an element applies to floats inside that element, and is designed to prevent the element from "collapsing" due to the floats.

You don't need a clearfix here. You're simply looking to clear the floats normally. A simple clear: left or clear: both on the element following the floats is enough.