Introduktion til float egenskaben i CSS

Lad os sige, at vi har en div med en lang tekst. Lad os indsætte et billede i starten af denne tekst:

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

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

Som du kan se, placerer billedets bund på den første tekstlinje, og resten af teksten går opad. Til højre for billedet opstår der et stort tomt rum. Lad os gøre det sådan, at teksten fylder dette tomme rum. For at gøre dette sætter vi egenskaben float på billedet med værdien left:

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

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

Så nu flyder billedet til venstre, og teksten flyder omkring det til højre. Samtidig forsvinder det tomme rum ved siden af billedet.

Man kan få billedet til at flyde ikke til venstre, men til højre. For dette sættes float til værdien right:

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

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

Tag en lang tekst. Indsæt et billede i starten af teksten og et andet i midten. Gør så det første billede flyder til venstre og det andet til højre.