micro clearfix doesn't work

Question

i am using nicolas gallagher's micro-clearfix in my Fixed layout. And in my layout the green colored footer does not appear. Which means the clearfix doesn't work properly

<div class="container">
    <aside class="al">
    </aside>
    <section class="content">

    </section>
    <aside class="ar">
    </aside>
    <footer class="cf">
    </footer>
</div>

css

.container {
    width: 500px;
    height: 400px;
    margin: 0 auto;
}
.al {
    background: red;
    width: 100px;
    height: 100px;
    float: left;
}
.content {
    float: left;
    width: 300px;
    height: 100px;
    background: black;
}
.ar {
    background: red;
    width: 100px;
    height: 100px;
    float: left;
}
footer {
    background: blue;
    width: 100%;
    height: 100px;
    background: green;
}

and micro clearfix

.cf:after, .cf:before {
    content: " ";
    display: table; 
}
.cf:after {
    clear: both;
}
.cf {
    *zoom: 1;
}

DEMO

What am i doing wrong. how do i make this work. could someone help me please

Answer 1

You usually apply clearfix to the element that contains all of your floats.

However, in this case the easiest solution is to not use clearfix at all to contain the floats, but instead to use clear: both on footer:

http://jsfiddle.net/thirtydot/4NJ6v/3/

If you really wanted to use clearfix here, it would look like this:

http://jsfiddle.net/thirtydot/4NJ6v/6/

As you can see, an extra wrapping div had to be added, which isn't great.

Answer 2

Add clear:both to footer http://jsfiddle.net/4NJ6v/4/ or you can add float:left to footer