1

I have used

<div style="clear: both"></div>

to clear the floats... and have seen cases where it is

<div style="clear: both; height: 1px; line-height: 1px"></div>

and have seen clearfix, and some with a hidden . and make it the same color as the background. Now Compass and Blueprint also have a +clearfix. What is the current best way to clear floats, now that probably we don't need to support IE 6?

1
  • with the first kind of clear:both , i had problems in IE7 too , it added height , then i used your second approach to give height as 1px;
    – kobe
    Nov 6, 2010 at 2:28

4 Answers 4

1

Depending on the situation, I mostly use overflow or float the parent element. There is no best solution.

1
  • can you give a short example of them or point to a webpage that talks about it? Nov 6, 2010 at 3:11
1

I actually like the method explained here: http://www.quirksmode.org/css/clearing.html. It get's away from adding an extra element to the html.

1

I have learned that content: ""; display: table; clear: both; work with all browsers after IE 8+

0

I like clearfix. Read this too (which I didn't know about until just now): Everything you Know about Clearfix is Wrong.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.