Tekstas float tėvinėje CSS

Pašalinkime savybę height div'ui ir įdėkime trumpą tekstą prieš paveikslėlį.

Šiuo atveju mūsų div'o aukštis bus lygus teksto aukščiui, o paveikslėlis vis tiek išsikiš už div'o:

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

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

Результат:

Padėkime tekstą po paveikslėliu - rezultatas nesikeis:

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

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

Результат:

Padarykime taip, kad paveikslėlis plauktų kairėje pusėje - rezultatas bus analogiškas:

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

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

Результат:

Apačioje pridėkime dar vieną div'ą - paveikslėlis užlips ir ant jo:

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

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

Результат:

Jei pirmajame div'e bus tiek daug teksto, kad jo aukštis bus didesnis už paveikslėlio aukštį - jis neužlips ant antrojo div'o:

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

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

Результат:

Šis momentas yra labai svarbus - kuriant gali būti taip, kad kuriame nors bloke jūsų yra gana daug teksto, o vėliau, kai svetainė jau veikia, šiame bloke bus mažiau teksto, nei buvo planuota. Pasirodo, kad šiuo atveju pasireikš problema, kai plaukuojantys elementai užlips ant gretimų blokų.