ảnh Floating sang trái thay đổi chứa div của chiều cao

Question

Khi tôi cố gắng chạy như sau:

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

với CSS:

​#container { 
    background:#000; 
} 

tôi nhận được một DIV với một container nền đen như tôi muốn .

Tuy nhiên, khi tôi thêm dòng sau vào CSS:

#container img { 
    float:left; 
} 

Nó có vẻ như container không phát hiện hình ảnh bên trong nó và chiều cao của nó được thiết lập để tối thiểu (có thể được nhìn thấy ở đây: http://jsfiddle.net/wc4GJ/).

Làm cách nào để thả hình ảnh sang bên trái lộn xộn lên chiều cao của DIV của vùng chứa?

Cảm ơn,

Joel

Answer 1

Thêm overflow:auto; để #container

(Giải thích bên dưới)

Answer 2

Bạn cần phải thêm một div thanh toán bù trừ sau khi img:

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

Và trong CSS:

.clearing { clear: both; }