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

thirtydot · Accepted Answer · 2013-09-11T06:28:03.867

5

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.

edited Sep 11 '13 at 06:28

answered Sep 11 '13 at 06:16

thirtydot

224,678
48
389
349

i added cf to the footer but it still not work. could you please tell me why is that. http://jsfiddle.net/4NJ6v/5/ i need to learn it :) i will use clear: both on footer.it is easier thanks – It worked yesterday. Sep 11 '13 at 06:21
1

I just edited my answer with an example of how you would use clearfix in this situation. In your demo, you still have clearfix on the footer, which is simply not how you use it. This might help: http://stackoverflow.com/questions/8933494/bootstrap-css-containerbefore-display-table/8933894#8933894 – thirtydot Sep 11 '13 at 06:22
1

That's it: a clearfix contains floated elements (and can have a visible background otherwise it'd have a null height thus no visible background) while `.clear { clear: both}` comes after floats if needed – FelipeAls Sep 11 '13 at 06:28

VenomVendor · Answer 2 · 2013-09-11T06:24:51.527

1

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

edited Sep 11 '13 at 06:24

answered Sep 11 '13 at 06:17

VenomVendor

15,064
13
65
96

micro clearfix doesn't work

2 Answers2