Floating immagine a sinistra cambia altezza del contenitore di div

Question

Quando provo ad eseguire il seguente:

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

con i CSS:

​#container { 
    background:#000; 
} 

ho un DIV con uno sfondo nero contenitore come voglio .

Tuttavia, quando aggiungo quanto segue alla CSS:

#container img { 
    float:left; 
} 

Sembra che il contenitore non rileva l'immagine al suo interno e la sua altezza è impostato al minimo (può essere visto qui: http://jsfiddle.net/wc4GJ/).

Come mai fluttuare l'immagine a sinistra incasina l'altezza del contenitore DIV?

Grazie,

Joel

Answer 1

Aggiungi overflow:auto; al #container

(Spiegazioni di seguito)

Answer 2

è necessario aggiungere un div compensazione dopo l'IMG:

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

E in CSS:

.clearing { clear: both; }