Introdução à propriedade float em CSS

Suponha que temos uma div com um texto longo. Vamos inserir uma imagem no início deste texto:

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

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

Como você pode ver, a parte inferior da imagem está posicionada na primeira linha do texto, e o restante do texto sobe. À direita da imagem fica um grande espaço vazio. Vamos fazer com que o texto preencha esse espaço vazio. Para isso, vamos aplicar a propriedade float com o valor left à imagem:

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

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

Então, agora a imagem flutua à esquerda, e o texto a envolve pela direita. Com isso, o espaço vazio ao lado da imagem desapareceu.

Podemos fazer a imagem flutuar não à esquerda, mas à direita. Para isso, defina float com o valor right:

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

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

Pegue um texto longo. Insira uma imagem no início do texto e outra no meio. Faça com que a primeira imagem flutue à esquerda e a segunda à direita.