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:

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

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

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

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

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

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

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

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

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

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

div {
	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:

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

div {
	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ų.