CSS да флоатлар отасидаги матн

Келгила, див учун height хусусиятини олиб ташлаб, расмдан олдин кичкина матн қўйайлик.

Бунда дивимизнинг баландлиги матннинг баландлигига тенг бўлади, расм эса дивдан ташкарига чиқиб туради:

html<div>
  матн
  <img src="img.png" alt="">
</div>

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

Результат:

Келгила, матнни расмдан кейин қўйайлик - натижа ўзгармайди:

html<div>
  <img src="img.png" alt="">
  матн
</div>

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

Результат:

Келгила, расм чап томонда учсин - натижа ўхшаш бўлади:

html<div>
  <img src="img.png" alt="">
  матн
</div>

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

Результат:

Келгила, pastki қисмга яна бир див қўшайлик - расм унга ҳам ёниб олади:

html<div>
  <img src="img.png" alt="">
  матн
</div>
<div>
  матн
</div>

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

Результат:

Агар биринчи дивга шунчалик кўп матн қўшилсаки, унинг баландлиги расмникидан катта бўлса - расм иккинчи дивга ёнбойламайди:

html<div>
  <img src="img.png" alt="">
  some long text
</div>
<div>
  матн
</div>

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

Результат:

Бу жуда муҳим момент - ишлаб чиқиш жараёнида сизнинг бирор блокингизда жуда кўп матн бўлиши мумкин, аммо сайт ишга тушиганда эса у блокда режалаштирилгандан камроқ матн бўлиши мумкин. Мана шундай ҳолатда сузувчан элементларнинг қўшни блокларга ёниб қолиши муаммоси юзага келади.