How to use the .clearfix class?

Question

I think I'm misunderstanding the concept of the .clearfix class. Maybe somebody can help me out.

I'm looking for a way to use float and clear without messing up my markup. So I thought, that's where .clearfix can be used for.

Inside of an empty H5BP-project, my markup looks like:

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

Below the result. I was expecting a tic tac toe-field, though. Can somebody tell me:

1. How I can achieve my goal and
2. What the .clearfix class really can be used for?

Answer 1

The clearfix class is used on a container of which all the children are floating. If you would not use this, the container would not get any height (except in IE). http://complexspiral.com/publications/containing-floats/

What you are after is not a clearfix, but just a clear. You could make a class
.clear { clear: both;}
and apply that one instead of the clearfix you are using now.

If you want to learn more about clearfix, there is plenty of information out there:
What is a clearfix?

I have set up a small example to demonstrate the use of clearfix and clear: http://jsfiddle.net/hjXMG/1

Answer 2

• Clearfix is added around floating blocks
• Clear is added after floating blocks