最近在做HTML页面的时候，产品列表页面的单个产品因为名称长短不一，高度不能固定，要自适应高度，便如此一来，就会出来错位情况，整个页面就全乱了，当然这个问题对于现在多数浏览器来说已经不是问题，但是还是有部分版本的浏览器不兼容，所以还是得解决！

       试了很多种方法，最后抱着试试的心态，用了clear:both属性，解决了这个问题，这样做问题虽然解决了，但是同时也给程序员带来了一点儿小麻烦，在写程序的时候需要做一下判断，比如一排显示四个产品的话，在输出4个产品、8个产品、16个产品的时候……需要输出“<div style=’clear:both’></div>”

1、样式如下：
<style>
.prolist{ width:760px; border:1px solid #ccc; }
.prolist ul {overflow:hidden;}
.prolist ul li{ float:left;}
.prolist li div{ width:188px; border:1px solid #ddd;}
.clear:both;
</style>

<div class="prolist"><ul>
    <li>图片文字内容</li>
    <li>图片文字内容</li>
    <li>图片文字内容</li>
    <li>图片文字内容</li>
<div class="clear"></div>
    <li>图片文字内容</li>
    <li>图片文字内容</li>
    <li>图片文字内容</li>
    <li>图片文字内容</li>
</ul>
</div>

更好的方法还在摸索中……