क्लीयरफिक्स और सीएसएस में पैरेंट की ऊंचाई

आइए एक डिव को parent क्लास के साथ छोड़ दें, उससे टेक्स्ट हटा दें, और केवल फ्लोटिंग इमेज छोड़ दें। जैसा कि आप पहले से ही जानते हैं, इस स्थिति में डिव की ऊंचाई शून्य हो जाएगी, केवल उसका ऊपरी और निचला बॉर्डर रह जाएगा। इमेज हमारे डिव के नीचे से बाहर निकल जाएगी:

<div class="parent">
	<img src="img.png" alt="">
</div>

.parent {
	border: 1px solid red;
}
.parent img {
	float: left;
}

आइए ऐसा करें कि फ्लोटिंग इमेज हमारे डिव की ऊंचाई बढ़ा दे। इसके लिए एक चालाक तरीका इस्तेमाल किया जाता है - इमेज के बाद clearfix क्लास वाला एक खाली डिव लगाएं।

हमारी इमेज एक फ्लोटिंग एलिमेंट है और पैरेंट की ऊंचाई नहीं बढ़ाती, लेकिन डिव-क्लीयरफिक्स - फ्लोटिंग नहीं है और पैरेंट की ऊंचाई को प्रभावित करता है।

चूंकि डिव-क्लीयरफिक्स को clear प्रॉपर्टी दी गई है, तो ऐसा होगा कि वह इमेज द्वारा नीचे धकेला जाएगा और उसके नीचे खड़ा होगा, जिससे पैरेंट की ऊंचाई बढ़ जाएगी।

डिव-क्लीयरफिक्स स्वयं खाली है और स्क्रीन पर दिखाई नहीं देता, लेकिन इसके बावजूद पैरेंट की ऊंचाई बढ़ा देता है।

तो, आइए कोशिश करते हैं:

<div class="parent">
	<img src="img.png" alt="">
	<div class="clearfix"></div>
</div>

.parent {
	border: 1px solid red;
}
.parent img {
	float: left;
}

.clearfix {
	clear: both;
}