CSS में फ्लोट्स के पैरेंट में टेक्स्ट

आइए डिव के लिए height प्रॉपर्टी हटा दें और इमेज से पहले थोड़ा सा टेक्स्ट डालें।

इस स्थिति में हमारी डिव की ऊंचाई टेक्स्ट की ऊंचाई के बराबर होगी, और इमेज अभी भी डिव के बाहर निकल जाएगी:

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

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

Результат:

आइए इमेज के बाद टेक्स्ट डालें - परिणाम नहीं बदलेगा:

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

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

Результат:

आइए इमेज को बाएं किनारे पर फ्लोट करवाएं - परिणाम इसी तरह का होगा:

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

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

Результат:

आइए नीचे एक और डिव जोड़ें - इमेज उस पर भी चढ़ जाएगी:

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

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

Результат:

अगर पहली डिव में इतना ज्यादा टेक्स्ट डाल दें कि वह ऊंचाई में इमेज से बड़ा हो जाए - तो वह दूसरी डिव पर नहीं चढ़ेगी:

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

cssdiv {
  text-align: justify;
  border: 1px solid red;
}
img {
  float: left;
}

Результат:

यह बिंदु बहुत महत्वपूर्ण है - डेवलपमेंट के दौरान ऐसा हो सकता है कि किसी ब्लॉक में आपके पास काफी ज्यादा टेक्स्ट है, और फिर साइट के वास्तविक काम करते समय उस ब्लॉक में प्लान किए गए से कम टेक्स्ट हो। ऐसा होगा, कि इस स्थिति में फ्लोटिंग एलिमेंट्स के पड़ोसी ब्लॉक्स पर चढ़ने की समस्या प्रकट होगी।