在級聯浮動元素中清除浮動

Question

在級聯浮動元素佈局中;當我嘗試清除內部元素的浮動時，它會擴展元素高度以覆蓋外部浮動元素的大小。下面是示例：

<div class="right"> 
    right 
</div> 
<div class="left"> 
    <div class="top"> 
     <span>top</span> 
     <div class="right-float-inside">right-float-inside</div> 
     <div class="clear-float"></div> 
    </div> 
    left 
</div> 

相應的CSS

div { 
    padding: 5px; 
} 
.top { 
    background-color: #ee0; 
} 
.left { 
    background-color: #e00; 
    margin-right: 200px; 
} 
.right { 
    background-color: #0e0; 
    float: right; 
    height: 80px; 
    width: 200px; 
} 
.right-float-inside { 
    height: 50px; 
    float: right; 
    background-color: #00e; 
} 
.clear-float { 
    clear: both; 
} 

這裏是活生生的例子： http://jsfiddle.net/UUpaP/4/

我很期待得到呈黃色DIV剛結束藍色div後。我得到的是黃色的div結束綠色之後。

如何限制清晰範圍？

Answer 1

您需要的是overflow: hidden爲您的.left元素。 working example