在级联浮动元素中清除浮动

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