IE6 浮动 div 无法正确清除答案

【问题标题】：IE6 floating divs don't clear properlyIE6 浮动 div 无法正确清除
【发布时间】：2012-05-29 22:01:30
【问题描述】：

我正在尝试使用浮动元素制作一个 2 列的“表格”：

<ul>
  <li class="odd">This will appear on the left</li>
  <li class="even">This will appear on the right</li>
  <li class="odd">This will appear on the left (2)</li>
  <li class="even">This will appear on the right (2)</li>
  <li class="odd">This will appear on the left (3)</li>
  <li class="even">This will appear on the right (3)</li>
</ul>

CSS：

ul { 
    margin: 20px 0px; 
    width: 880px;
}

li {
    position: relative;
    float: left;
    width: 410px;
    margin: 0px 0px 10px 0px;
    padding: 0;
}

.odd { clear: left; }

.even {
    clear: right;
    margin-left: 50px;
}

Here's a JSFiddle

这很好用，但在 IE6 中，even 元素不清晰，最终水平堆叠在第一行。我该如何解决这个问题？

【问题讨论】：

如果您删除clear: left 和clear: right，您的演示在现代浏览器中不会发生变化，并且可以在IE6 中运行。你有什么理由需要clear吗？一个原因是您的lis 并不总是彼此相同的高度。另外，你为什么支持IE6？根据ie6countdown.com，它在英国拥有 1.4% 的市场份额。
@thirtydot 支持不是我的决定（我们的产品支持 NT4！）。元素高度不同，我认为需要水平对齐。
这种方法适用于 IE6：jsfiddle.net/thirtydot/SE2Mn。你怎么看？
模仿表格的无序列表？肯定有更好的解决方案吗？

标签： html css internet-explorer-6 cross-browser

【解决方案1】：

如果你将元素设为容器的 50% 宽度，然后将它们全部浮动到左侧，那么每个元素将浮动到最后一个元素旁边，直到有 2 个元素，然后下一个元素将出现在下一行。

ul { 
    width: 880px;
    overflow:hidden; /* to clear */
}

li {
    float: left;
    width: 50%;
}

【讨论】：

当我尝试为右侧元素添加边距时，这会变得有点讨厌

【解决方案2】：

这就是我所做的。这是对 errkk 答案的轻微改编，所以我会将他标记为已接受。

li { width: 48%; }

.odd { clear: both; }

.even { margin-left: 4%; }

【讨论】：