Плавающее изображение влево изменяет высоту контейнера div

Когда я пытаюсь запустить следующее:

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

с CSS:

#container {
    background:#000;
}

Я получаю DIV с контейнером черного фона, как я хочу.

Однако, когда я добавляю следующее в CSS:

#container img {
   float:left;
}

Кажется, что контейнер не обнаруживает изображение внутри него, а его высота установлена на минимум (можно увидеть здесь: http://jsfiddle.net/wc4GJ/).

Как происходит плавание изображения слева, беспорядок вверх по высоте контейнера DIV?

Спасибо,

Joel

Ответ 1

Добавить overflow:auto; в #container

(пояснения ниже)

Ответ 2

Вам нужно добавить очищающий div после img:

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

И в CSS:

.clearing { clear: both; }