Introducción a la propiedad float en CSS

Supongamos que tenemos un div con un texto largo. Insertemos una imagen al principio de este texto:

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

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

Como puedes ver, la parte inferior de la imagen se ubica en la primera línea del texto, y el resto del texto sube hacia arriba. A la derecha de la imagen queda un gran espacio vacío. Hagamos que el texto llene este espacio vacío. Para ello, aplicaremos a la imagen la propiedad float con el valor left:

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

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

Entonces, ahora la imagen flota a la izquierda, y el texto la rodea por la derecha. Al mismo tiempo, el espacio vacío al lado de la imagen desapareció.

Se puede hacer que la imagen flote no a la izquierda, sino a la derecha. Para ello, establezcamos float en el valor right:

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

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

Toma un texto largo. Inserta una imagen al principio del texto y otra en el medio. Haz que la primera imagen flote a la izquierda y la segunda a la derecha.