jquery - 如何在两列列表中正确使用 float

Question

我正在制作一个列表，包含两列列表，按日期排序。我想交替使用不同日期的背景颜色(白色/红色/白色/红色):

.evenDayBlock {
    background:#red
}

I have created a fiddle to show the layouthttp://jsfiddle.net/Ceh37/

问题是，因为我已经 float 了每个列表项，所以类 evenDayBlock 的 div 不会随着列表的填充而向下延伸。如果我删除每个列表项的 float ，则 div 会正确扩展。如何在使用 float 的同时确保父 div 尊重子元素的大小？

更新

好的，我知道我不能用列表项替换 div，因为它会产生邪恶的东西。我在这里更新了 fiddle :

http://jsfiddle.net/Ceh37/2/

全部切换为div。这让我处于一个更好的位置，因为现在 evenDayBlock 被推过了第一个 oddDayBlock，但它仍然没有扩展到覆盖它包含的所有子 div。

Answer 1

在更正你的 fiddle 的语义之后(参见你的问题的评论)，你应该尝试使用 overflow: hidden在所有 float 元素的父容器上(例如，如果 <li> 是 float 的，请在直接父级 <ul> 上使用溢出技巧)。

或者您可以使用 clearfix方法。