Introduzione alla proprietà float in CSS

Supponiamo di avere un div con un testo lungo. Inseriamo all'inizio di questo testo un'immagine:

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

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

Come puoi vedere, la parte inferiore dell'immagine si posiziona sulla prima riga di testo, mentre il resto va verso l'alto. Alla destra dell'immagine risulta un grande spazio vuoto. Facciamo in modo che il testo riempia questo spazio vuoto. Per farlo, impostiamo sulla proprietà float dell'immagine il valore left:

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

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

Quindi, ora l'immagine flutta a sinistra, e il testo la avvolge di conseguenza a destra. In questo modo lo spazio vuoto di lato all'immagine è scomparso.

Si può far fluttuare l'immagine non a sinistra, ma a destra. Per farlo, impostiamo float al valore right:

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

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

Prendi un testo lungo. Inserisci all'inizio del testo un'immagine, e a metà - un'altra. Fai in modo che la prima immagine flutti a sinistra, e la seconda - a destra.