Introdução à propriedade float em CSS

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

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

cssdiv {
  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:

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

cssdiv {
  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:

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

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

Результат: