清除级联浮动元素中的浮动答案

【问题标题】：Clearing float in cascaded floating elements清除级联浮动元素中的浮动
【发布时间】：2013-03-26 11:38:36
【问题描述】：

在级联浮动元素布局中；当我尝试清除内部元素的浮动时，它会扩展元素高度以覆盖外部浮动元素的大小。这是示例：

<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 以绿色结尾。

如何限制清除范围？

【问题讨论】：

您要准确清除哪些浮动？
类 .right-float-inside 的 div 的右浮动
您需要的是 overflow: hidden 用于您的 .left 元素。 working example
感谢@nd_macias 它解决了这个问题。您想将其写为答案，以便我批准答案吗？

标签： css css-float

【解决方案1】：

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

【讨论】：