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

Question

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

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

Answer 1

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

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

Answer 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; }