Introduksjon til float-egenskapen i CSS

La oss si at vi har en div med en lang tekst. La oss sette inn et bilde i begynnelsen av denne teksten:

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

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

Som du ser, plasseres bunnen av bildet på den første linjen med tekst, og resten går oppover. Til høyre for bildet er det et stort tomrom. La oss gjøre så at teksten fyller dette tomrommet. For å gjøre dette, setter vi egenskapen float til verdien left på bildet:

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

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

Så, nå flyter bildet til venstre, og teksten flyter rundt det tilsvarende til høyre. Samtidig forsvant tomrommet på siden av bildet.

Du kan få bildet til å flyte ikke til venstre, men til høyre. For å gjøre dette, sett float til verdien right:

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

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

Ta en lang tekst. Sett inn ett bilde i begynnelsen av teksten, og et annet i midten. Gjør slik at det første bildet flyter til venstre, og det andre - til høyre.