CSS-de ýüzen elementleriň ebeveýnindäki tekst

Div üçin height aýratynlygyny aýyryp, suratdan öň kiçi bir tekst goýalyň.

Bu ýagdaýda biziň div-ymyzyň beýikligi tekstiň beýikligine deň bolar, we surat henizem div-den daşary çykar:

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

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

Результат:

Teksti suratdan soň goýalyň - netije üýtgemeýär:

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

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

Результат:

Suratyň çep tarapda ýüzüp ýörüşini edeliň - netije şuňa meňzer bolar:

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

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

Результат:

Aşakda ýene bir div goşalyň - surat ona hem aralaşar:

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

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

Результат:

Eger birinji div-e suratdan uzyn boljak ýaly köp tekst goşulsa - ol ikinji div-e aralaşmaz:

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

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

Результат:

Bu nokat örän möhümdir - ösdürip düzüş wagtynda siziň käbir blogyňyzda ýeterlik köp tekst bolup, soňra sahypanyň iş wagtynda bu blokda meýilleşdirilenden az tekst bolup bilýär. Netijede, bu ýagdaýda ýüzen elementleriň goňşy bloklara aralaşýan problemi ýüze çykar.