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:

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

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

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

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

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

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

Результат: