Floats not clearing properly in IE - how to fix?

I've been banging my head for about an hour now, and I've distilled the problem down to the simplest example I can think of that shows the problem.

The CSS/HTML

<style>
  #T div { float: left; }
  ._b { clear: left; }
</style>

<div id='T'>
    <div class='_a'>*</div>
    <div class='_b'>*</div>
    <div class='_c'>*</div>
    <div class='_d'>*</div>
</div>

IE7

开发者_StackOverflow中文版

***
*

FF, Chrome, Opera

*
***

The result in FF/Chrome/Opera is what I'd expect. There's no adding more mark-up to fix this and I'm absolutely befuddled on to how to make it work properly in IE.

It gets really ugly when you have say, 3 all on a row to themselves and then 3 meant to be on the same line -- the extra 2 end up on the first row.

I really hope someone knows the work-around for this.

Setting a width of the floated div's doesn't help nor does having a width on the parent element, because this is a simple example. Imagine each row can have 1-5 elements and then you can see the problem.

---

This seems like an in-depth evaluation of IE's float quirks. Check it out, maybe it will help ;)

---

.clearfix:before, .clearfix:after {content: "\0020"; display: block; height: 0; visibility: hidden; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

Just apply the clearfix class to the elements you want cleared, this css will take care of the problems in all browsers. I recommend to read up on the issue, at the link Blender3D provided.