Inleiding tot de float eigenschap in CSS

Stel we hebben een div met een lange tekst. Laten we aan het begin van deze tekst een afbeelding plaatsen:

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

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

Zoals je ziet, bevindt de onderkant van de afbeelding zich op de eerste regel van de tekst, en de rest van de tekst gaat naar boven. Aan de rechterkant van de afbeelding ontstaat een grote lege ruimte. Laten we ervoor zorgen dat de tekst deze lege ruimte opvult. Hiervoor geven we de afbeelding de eigenschap float met de waarde left:

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

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

Dus, nu zweeft de afbeelding aan de linkerkant, en de tekst stroomt er dienovereenkomstig aan de rechterkant omheen. Tegelijkertijd is de lege ruimte naast de afbeelding verdwenen.

Je kunt de afbeelding niet links, maar rechts laten zweven. Hiervoor zetten we float op de waarde right:

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

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

Neem een lange tekst. Plaats aan het begin van de tekst de ene afbeelding, en in het midden - een andere. Zorg ervoor dat de eerste afbeelding links zweeft en de tweede - rechts.