清除內浮點

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。