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:
.clearfix
class really can be used for?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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With