Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use the .clearfix class?

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?

like image 402
kraftwer1 Avatar asked Jun 09 '13 19:06

kraftwer1


2 Answers

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

like image 123
Pevara Avatar answered Oct 01 '22 01:10

Pevara


  • Clearfix is added around floating blocks
  • Clear is added after floating blocks
like image 42
FelipeAls Avatar answered Oct 01 '22 02:10

FelipeAls