float后仍然出现空白边叠加

做页面时遇到一个奇怪的空白边叠加

样式：

<style>
.wrapper{font:12px/1.5 "宋体";width:500px}
ol{margin:0;padding:0;float:left;width:100%;}
li{float:left;width:100%;margin:20px auto; }
.c{clear:both;margin:0;padding:0;font-size:1px;height:1px;overflow:hidden;background:green}
</style>

内容：

<div class="wrapper">
<ol onclick="alert(this.offsetHeight)" style="background:#666">
    <li>立体化的竞争机制：提升学习热情</li>
    <li>立体化的竞争机制：提升学习热情</li>
    <li>立体化的竞争机制：提升学习热情</li>
    <li style="clear:both" id="last" >立体化的竞争机制：提升学习热情</li>
</ol>
<ol onclick="alert(this.offsetHeight)" style="background:#ddd">
    <li id="first" >立体化的竞争机制：提升学习热情</li>
    <li>立体化的竞争机制：提升学习热情</li>
    <li>立体化的竞争机制：提升学习热情</li>
    <li>立体化的竞争机制：提升学习热情</li>
</ol>
</div>

按照正常情况，当元素浮动以后，就不会出现margin collapse现象，或者在上下加了padding或border后也可以解决margin collapse，但在这里有两个地方比较奇怪。

id="last" 与 id="first"的li发生了空白边叠加

首先，以上两种方法都没有解决margin collapse

其次，红色样式部分，如果去掉clear:both,IE6下就不存在margin collapse,如果加上，或者给所有li都加上clear:both,IE6，IE7都存在空白边叠加，但IE7始终都存在margin collapse

我使用的解决方案是在第一个ol在增加一个<li class="c"></li>,c的样式见style

不确定是不是真的是空白边叠加引起的问题，也没有很好的解决方案，知道的朋友请不吝赐教