Įvadas į float savybę CSS

Tarkime, kad turime div su kokiu nors ilgu tekstu. Įterpkime į šio teksto pradžią paveikslėlį:

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

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

Kaip matote, paveikslėlio apačia išsidėsto pirmoje teksto eilutėje, o likusi dalis patenka aukštyn. Dešinėje nuo paveikslėlio atsiranda didelė tuščia vieta. Padarykime taip, kad tekstas užpildytų šią tuščią vietą. Tam paveikslėliui nustatysime savybę float reikšme left:

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

div {
	width: 400px;
	text-align: justify;
}
img {
	float: left;
}

Taigi, dabar paveikslėlis plūdra kairėje, o tekstas ją apteka atitinkamai dešinėje. Tuo pačiu tuščia vieta šone nuo paveikslėlio išnyksta.

Galima priversti paveikslėlį plūdurti ne kairėje, o dešinėje. Tam float nustatykime reikšmę right:

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

div {
	width: 400px;
	text-align: justify;
}
img {
	float: right;
}

Paimkite ilgą tekstą. Įterpkite į pradžią teksto vieną paveikslėlį, o į vidurį - kitą. Padarykite taip, kad pirmas paveikslėlis plūdurtų kairėje, o antras - dešinėje.