Löschen float für nur übergeordneten Container, nicht Vorfahren?

Question

Ich habe folgendes Layout mit 2 Schwimmer Behälter:

<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> 

Sie können es bei http://jsfiddle.net/dNmNj/ sehen.

Meine Absicht ist, floats für zu löschen, so dass der blaue Block (This Block) direkt unter dem gelben (nicht dem rosa) bleibt. Das Ergebnis ist jedoch, dass es auch Floats für #navigation löschte.

Wie lösche ich Floats nur für den übergeordneten Container und nicht für alle Vorgängercontainer?

Answer 1

können Sie erreichen, was Sie von overflow:hidden zu Ihrem #container Hinzufügen möchten:

http://jsfiddle.net/dNmNj/2

dies ein guter Artikel über Clearing wird schwimmt

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

aber der Grund, deine blauen div dropping wo es ist, weil das #container div nicht floated ist - nur Rand links

Im Folgenden wird eine Überarbeitung, die mehr Cross-Browser kompatibel:

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