CSSда float хусусиятига кириш

Бизда узун матн бор див бўлсин. Келинг, шу матннинг бошланишига расм қўшайлик:

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

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

Результат:

Кўриб турганингиздек, расмнинг пасти матннинг биринчи сатрида жойлашган, қолган кисми esa юқорига чиқиб кетган. Расмнинг ўнг томонида катта бўш жой ҳосил бўлди. Келинг, матн шу бўш жойни tолдириши учун қилайлик. Бунинг учун расмга 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;
}

Результат: