Czyszczenie pływaków tylko dla kontenera rodzica, a nie przodków?

Question

Mam następujący układ z pojemników pływakowych 2 POZIOM:

<div id="navigation" style="float: left; width: 150px; height: 200px; background-color: #eee">Navigation</div> 
<div id="container" style="margin-left: 150px; background-color: #f00"> 
    <div style="float: left; width: 50%; height: 100px; background-color: #ff0">Block</div> 
    <div style="float: left; width: 50%; height: 20px; background-color: #f0f">Block</div> 
    <div style="clear: both"></div> 
    <div style="float: left; width: 50%; height: 50px; background-color: #00f">This Block</div> 
</div> 

Można go zobaczyć na żywo w http://jsfiddle.net/dNmNj/.

Moim zamiarem jest oczyścić pływaki dla #container, tak aby niebieski blok (This Block) pozostał tuż pod żółtym (nie różowy). Jednak wynik jest taki, że wyczyścił również pływaki dla #navigation.

Jak wyczyścić obiekty pływające tylko dla kontenera nadrzędnego, a nie dla kontenerów przodków?

Answer 1

Można osiągnąć to, co chcesz, dodając overflow:hidden do #container:

http://jsfiddle.net/dNmNj/2

To jest dobry artykuł o polanie pływa

http://www.quirksmode.org/css/clearing.html

ale powodem Twój niebieski div jest upuszczenie tam, gdzie jest, ponieważ element div #container nie jest pływający - tylko margines pozostało

Poniżej przedstawiono przeróbką który jest bardziej kompatybilne z różnymi przeglądarkami:

http://jsfiddle.net/dNmNj/3/