CSS: Posicionamiento flotante

La propiedad float

Las imágenes son elementos en línea, es decir, que se insertan como si fueran caracteres, formando parte del párrafo o del elemento de bloque en el que se insertan. La altura de la línea en la que está insertado el elemento aumenta lo necesario para poder alojar la imagen, como muestra el siguiente ejemplo, en el que la hoja de estilo no contiene ninguna propiedad relacionada con la imagen.

img {
}

Si se quiere que una imagen aparezca a la izquierda (o a la derecha) de un texto, es decir, que el texto fluya a lo largo de la imagen, hay que utilizar la propiedad float. Esta propiedad sólo admite dos valores, left y right, que sitúan la imagen a la izquierda o a la derecha, como muestran los ejemplos siguientes.

img {
  float: left;
}

img {
  float: right;
}

Si queremos tener una imagen a la izquierda y otra a la derecha, debemos definir clases y asignarlas a la imagen correspondiente

img.izquierda {
  float: left;
}

img.derecha {
  float: right;
}

<p><img class="izquierda"><img class="derecha">Texto</p>

Para que las imágenes salgan correctamente alineadas con el texto, la imagen debe insertarse al principio del texto, independientemente de la posición final que vaya a tener la imagen. Los siguientes ejemplos muestran las diferencias

Las dos imágenes están insertadas antes del texto:

<p><img class="izquierda"><img class="derecha">Texto</p>

La imagen izquierda está situada antes del texto y la imagen derecha al final del texto:

<p><img class="izquierda">Texto<img class="derecha"></p>

Las dos imágenes están insertadas al final del texto:

<p>Texto<img class="izquierda"><img class="derecha"></p>

Si las dos imágenes están situadas antes del texto, el orden de inserción no es importante

Las dos imágenes están insertadas antes del texto:

<p><img class="izquierda"><img class="derecha">Texto</p>

Las dos imágenes están insertadas antes del texto:

<p><img class="derecha"><img class="izquierda">Texto</p>

La propiedad clear

Al crear una imagen flotante, el navegador sitúa los elementos que se encuentran a continuación de la imagen a su lado mientras haya sitio, aunque no pertenezcan al mismo bloque, como muestra el siguiente ejemplo:

img {
  float: left;
}

Para impedir que ocurra esto, es necesario que la flotación de la imagen se interrumpa. La propiedad clear hace que un elemento no tenga elementos flotantes a su lado. Los posibles valores de clear son:

• left, que hace que no hayan elementos flotantes a la izquierda,
• right, que hace que no hayan elementos flotantes a la derecha,
• both, que hace que no hayan elementos flotantes ni a derecha ni a izquierda,
• none, que permite que hayan elementos flotantes a derecha y a izquierda (valor por omisión).

Se puede asignar la propiedad clear a cualquier elemento. En el ejemplo siguiente se ha asignado a una línea horizontal, de manera que la línea ya no flota a la derecha de la imagen, sino que se muestra a continuación de la imagen:

hr {
  clear: both;
}

img {
  float: left;
}

Centrar una imagen

La propiedad float no permite centrar objetos. Para centrar una imagen, el elemento que contiene a la imagen tiene que tener su contenido centrado.

Por ejemplo, si la imagen está en un párrafo, se puede definir la clase "p.centrado" con el atributo text-align establecido con el valor center y después dar al párrafo que contiene la imagen la clase "centrado". Lógicamente, si se añade texto al párrafo, el texto también se centrará.

<p class="centrado">
  <img alt="Logotipo de GNU (GNU is Not Unix)" src="../img/gnu-head-sm.jpg" title="Logotipo de GNU (GNU is Not Unix)">
</p>

p.centrado {
  text-align: center;
}