8

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?

Misha Huziuk
  • 170
  • 4
  • 18
kraftwer1
  • 5,253
  • 10
  • 36
  • 54

2 Answers2

22

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

Community
  • 1
  • 1
Pevara
  • 14,242
  • 1
  • 34
  • 47
6
  • Clearfix is added around floating blocks
  • Clear is added after floating blocks
Pevara
  • 14,242
  • 1
  • 34
  • 47
FelipeAls
  • 21,711
  • 8
  • 54
  • 74