清除内浮点

Question

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

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

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

Convoluted？好吧，我有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

“清除”属性不考虑在元素本身内或其他block formatting contexts.

和.MainLeftCol生活是body上下文的（或视口的，我不是很确定），所以这是的.MainRightCol以外的其.ListItem儿童，是你申请clear来。

请参阅the updated demo。