清除内浮子

Question

我正在开发一个网页，其外部浮动左列和常规右列。

然后右栏包含一个项目列表，其中每个项目都有一个浮动的左列和一个常规的右列。

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

卷积？好的，我posted the basic layout online。

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

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

有没有办法清除浮动元素而不清除另一个外部浮动元素？

Answer 1

除了clear: both样式之外，我还要向overflow: hidden添加overflow: auto或.MainRightCol样式，以便为其提供block formatting context：

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

这可以防止clear: both清除.MainLeftCol浮动，because

  

'clear'属性不考虑元素本身或其他block formatting contexts.

中的浮点数

以及.MainLeftCol所居住的上下文是body（或视口，我不完全确定），因此它位于.MainRightCol之外且其.ListItem之外1}}孩子们，你将clear应用到。

请参阅the updated demo。