better float clearing [duplicate]

This question already has answers here: Closed 11 years ago.

Possible Duplicate:

How do I clear my floats?

is there any way to clear floats better than clear div?

currently i'm using a div to clear floats lik开发者_JAVA技巧e

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

---

As an alternative suggestion, you could not use floats at all...

I've found that virtually everything that I would floats to do, I've been able to achieve just as well using display:inline-block;, and without having to mess around with clearing the floats.

I know it's a slightly left-field answer, but it's worth considering.

inline-block does have a few quirks of its own, but I hope you'll give it a try. (Oh, and it does have some bugs in IE6 which may put you off if you need to support that browser... they can be worked around, but if you're supporting IE6 then you have enough other problems to worry about anyway)

---

Have you heard of clearfix? That way you only have to specify the class name:

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

---

I like <br /> for clearing floats, and in CSS, just add some classes:

br.left { clear: left; }
br.right { clear: right; }
br.both { clear: both; }

Works like a charm, and easy to implement - <br class="left" />.

---

You dont need clearfix divs at all.

you should use overflow:auto;

http://jsfiddle.net/HharD/

<div id="container">
    <div id="left"></div>
    <div id="right"></div>
</div>

css

#container {width:200px;background:#faf;min-height:10px;overflow:auto;}
#left {width:100px;background:#fa0;float:left;height:100px;}
#right{width:100px;background:#09f;float:left;height:110px;}