html - 清除内部 float

Question

我正在开发一个网页，该网页具有外部 float 左列和常规右列。

右列包含一个元素列表，其中每个元素都有一个 float 左列和一个常规右列。

我的问题是，当列表项的右列不够高时，下一个列表项会缩进到上一个列表项的左列的右侧。

复杂吗？好吧，我已经 posted the basic layout online .

然后我从子列表中删除了元素，以便 one list item's right column isn't tall enough .

最后，我尝试了correcting the problem using clear:both 。问题是这会清除最外层的 float div。

有没有办法在不清除另一个外部 float 元素的情况下清除 float 元素？

Answer 1

除了 clear: Both 样式之外，还可以向 .MainRightCol< 添加 overflow: hide 或 overflow: auto 样式 赋予它自己的 block formatting context :

.MainRightCol {
    background-color:#f5f5f5;
    overflow:auto;
}

这可以防止 clear: Both 清除 .MainLeftCol float ，because

The 'clear' property does not consider floats inside the element itself or in other block formatting contexts.

并且 .MainLeftCol 所在的上下文是 body 的(或者视口(viewport)的，我不太确定)，所以它在 之外。 MainRightCol 及其 .ListItem 子项，您对其应用 clear。

参见the updated demo .