CSS में float गुण का परिचय

मान लीजिए कि हमारे पास कुछ लंबे पाठ वाला एक div है। आइए इस पाठ की शुरुआत में एक छवि डालें:

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

cssdiv {
  width: 400px;
  text-align: justify;
}

Результат:

जैसा कि आप देख रहे हैं, छवि का निचला भाग पाठ की पहली पंक्ति पर स्थित है, और बाकी भाग ऊपर चला जाता है। छवि के दाईं ओर एक बड़ी खाली जगह बन जाती है। आइए इसे ऐसा बनाते हैं कि पाठ उस खाली जगह को भर दे। इसके लिए छवि को float गुण देंगे जिसका मान left होगा:

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

cssdiv {
  width: 400px;
  text-align: justify;
}
img {
  float: left;
}

Результат:

तो, अब छवि बाईं ओर तैरती है, और पाठ उसके दाईं ओर लपेटता है। इसके साथ ही छवि के बगल में खाली जगह गायब हो गई है।

छवि को बाईं ओर नहीं, बल्कि दाईं ओर तैरने के लिए भी बनाया जा सकता है। इसके लिए float को मान right पर सेट करें:

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

cssdiv {
  width: 400px;
  text-align: justify;
}
img {
  float: right;
}

Результат: