फ्लोटिंग छवि कंटेनर div की ऊंचाई

Question

बदल जाता है जब मैं निम्नलिखित चलाने का प्रयास:

​#container { 
    background:#000; 
} 

मैं एक काले रंग की पृष्ठभूमि कंटेनर की तरह मैं चाहता हूँ के साथ एक DIV मिलती है:

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

सीएसएस के साथ

।

हालांकि, जब मैं सीएसएस के लिए निम्नलिखित जोड़ें:

#container img { 
    float:left; 
} 

यह इसके अंदर छवि पता नहीं लगा पाया कंटेनर की तरह लगता है और इसकी ऊंचाई कम से कम पर सेट है (यहां देखा जा सकता: http://jsfiddle.net/wc4GJ/)।

कंटेनर डीआईवी की ऊंचाई को बाएं गड़बड़ में छवि कैसे तैरते हैं?

धन्यवाद,

योएल

Answer 1

जोड़े overflow:auto; को #container

(नीचे स्पष्टीकरण)

Answer 2

आप img के बाद एक समाशोधन div जोड़ने की जरूरत:

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

और सीएसएस में:

.clearing { clear: both; }