CSS: DIV keine Höhe auf Schwimmer enthält gesetzt

Question

nehmen wir diesen Code haben:

<div id='upperDiv' style='min-height:200px;border: 1px solid #000000;'> 
    <div id='rightDiv' style='float:right;width:75%;'> 
     content1 
    </div> 
    <div id='leftDiv' style='float:left;width:25%;'> 
     content2 
    </div> 
</div> 
<div id='lowerDiv' style='height:50px;border: 1px solid #000000;margin-top:5px;'> 
    content3 
</div> 

Wenn der Inhalt von rightDiv und leftDiv die 200px Höhe verläuft (die Mindesthöhe) upperDiv nicht wachsen, so dass ihr Inhalt Überlappungen das untere div. Wenn ich das float-Attribut des großen Inhalts entferne, wächst es und es wird ein Problem geben. Aber ich weiß nicht, welche Div (rightDiv oder leftDiv) 200px Höhe passiert. Wie kann ich das beheben?

Dank

Answer 1

Set #upperDiv eine der folgenden: mit CSS Pseudo-Elemente (IE8 + kompatibel) wie dieses

#upperDiv:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

overflow: hidden; 
width: 100%; 

oder

float: left; 
width: 100%; 

oder eine Regel erstellen

Beste Lösung
Erstellen einer wiederverwendbaren Klassenregel wie die folgende.

.group:after { 
    content: ""; 
    display: table; 
    clear: both; 
} 

Jetzt können Sie es auf alles anwenden, das die gleiche Funktionalität benötigt. Zum Beispiel ...

<div id='upperDiv' class="group" ... > 

P.S. Wenn Sie IE 6/7-Kompatibilität benötigen, überprüfen Sie this post.

Answer 2

Dies ist beabsichtigt, da Gleitkommazahlen für Dinge wie Bilder in Absätzen (wo mehrere Absätze um das Bild gewickelt werden können) entwickelt wurden.

Komplexe Spirale hat eine fuller explanation, warum und Ed Elliot beschreibt eine Reihe von approaches to making containers expand around floats. Ich finde, dass der Ansatz overflow: hidden in den meisten Situationen am besten funktioniert.

Answer 3

Nach

<div id='leftDiv' style='float:left;width:25%;'> 
    content2 
</div> 

hinzufügen

 <div style="clear:both"></div> 

Es Ihr Problem lösen.