Schwimmdock Bild auf der linken Seite ändert Höhe des div-Container

Question

Wenn ich versuche, das folgende auszuführen:

​<div id="container"> 
    //This is a 200x200 image   
    <img src="http://dummyimage.com/200x200/CCC/000" /> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

mit CSS:

​#container { 
    background:#000; 
} 

ich ein DIV mit einem schwarzen Hintergrund Container wie ich will .

Allerdings, wenn ich den folgenden Code zu dem CSS:

#container img { 
    float:left; 
} 

Es scheint, wie der Behälter nicht das Bild im Inneren erkennt und seine Höhe auf ein Minimum eingestellt ist (hier werden können: http://jsfiddle.net/wc4GJ/).

Wie kommt es, schwebend das Bild auf der linken Seite die Höhe des Container DIV versauen?

Danke,

Joel

Answer 1

hinzufügen overflow:auto; zu #container

(Erklärungen unten)

Answer 2

Sie benötigen eine Lichtung div nach dem img hinzuzufügen:

​<div id="container"> 
    //This is a 200x200 image   
    <img src="http://dummyimage.com/200x200/CCC/000" /> 
    <div class="clearing"></div> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Und in CSS:

.clearing { clear: both; }