सीएसएस में फ्लोट्स का पैरेंट पर प्रभाव

अब मान लीजिए कि हमारे पास एक डिव है, जिसमें एक इमेज है। डिव को बॉर्डर देंगे, और इमेज को अभी float प्रॉपर्टी नहीं देंगे।

आइए देखें, यह ब्राउज़र में कैसा दिखेगा:

html<div>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}

Результат:

अब आइए इमेज को float प्रॉपर्टी सेट करें वैल्यू left में। इस केस में एक आश्चर्यजनक बात होगी - पैरेंट की ऊंचाई गायब हो जाएगी, उसकी निचली बॉर्डर ऊपरी बॉर्डर के तुरंत बाद शुरू होगी, और इमेज नीचे से अपने पैरेंट के बाहर निकल जाएगी:

html<div>
  <img src="img.png" alt="">
</div>

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

Результат:

ऐसा लगता है कि जिन एलिमेंट्स को float प्रॉपर्टी दी गई है, वे अपने पैरेंट की ऊंचाई को एक्सपैंड नहीं करते।

आइए float प्रॉपर्टी की वैल्यू left के बजाय right लिखें। पैरेंट का बिहेवियर नहीं बदलेगा, लेकिन इमेज दाईं ओर फ्लोट करने लगेगी:

html<div>
  <img src="img.png" alt="">
</div>

cssdiv {
  border: 1px solid red;
}
img {
  float: right;
}

Результат: