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.
精彩评论