css - カスケードされたフローティング要素のフロートをクリアする

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が緑色のdivの後に終わることです。

クリアの範囲を制限するにはどうすればよいですか？

Answer 1

あなたが必要とするのはoverflow: hiddenあなたの.left要素のためです。実例