CSS: Posicionamiento flotante

En esta lección se comentan propiedades CSS definidas en la recomendación CSS 2.1, publicada en junio de 2011.

Estas propiedades permiten asignar el esquema de posicionamiento flotante a un elemento de una página web.

Esquema de posicionamiento flotante: float y clear

La propiedad float establece el esquema de posicionamiento flotante para un elemento. Cuando existe un elemento flotante, los elementos que se encuentran a continuación del elemento flotante fluyen a lo largo de él, salvo que haya un elemento que tenga establecido la propiedad clear.

Las propiedades float y clear se pueden aplicar a cualquier elemento de una página web.

Posicionamiento flotante de caracteres: letra capital

Se puede crear una letra capital aplicando la propiedad float a la primera letra de un párrafo. En los ejemplos siguientes se utiliza una etiqueta <span> o la pseudo-clase ::first-letter.

span.capital {
  float: left;
  background-color: pink;
  color: red;
  font-family: monospace;
  font-size: 400%;
}
Enlace externo
p.capital::first-letter {
  float: left;
  background-color: pink;
  color: red;
  font-family: monospace;
  font-size: 400%;
}
Enlace externo

Nota: Firefox no muestra los dos ejemplos de la misma manera, mientras que Chrome sí lo hace, como se comenta en la página de diferencias entre navegadores.

Posicionamiento flotante de imágenes

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 {
}
Enlace externo

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;
}
Enlace externo
img {
  float: right;
}
Enlace externo

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>
Enlace externo

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

Correcto
Las dos imágenes están insertadas antes del texto:
<p><img class="izquierda"><img class="derecha">Texto</p>
Enlace externo
Desaconsejado
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>
Enlace externo
Desaconsejado
Las dos imágenes están insertadas al final del texto:
<p>Texto<img class="izquierda"><img class="derecha"></p>
Enlace externo

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>
Enlace externo
Las dos imágenes están insertadas antes del texto:
<p><img class="derecha"><img class="izquierda">Texto</p>
Enlace externo

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;
}
Enlace externo

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:

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;
}
Enlace externo

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;
}
Enlace externo

Posicionamiento flotante de otros elementos

La propiedad float se puede aplicar a cualquier elemento. En el ejemplo siguiente se ha aplicado la propiedad float a los párrafos (para que los párrafos floten uno al lado del otro en vez de ocupar de lado a lado, es necesario asignarles tamaño con las propiedades width y height).

Nota: Estrechando (o ensanchando) la ventana del navegador puede observarse como los párrafos que no caben en la una fila bajan a la siguiente (o suben a la anterior si caben).

p {
  float: left;
  width: 100px;
  height: 100px;
  margin: 3px;
  padding: 3px;
  border: black 2px solid;
}
Enlace externo

El tamaño de los párrafos se puede hacer proporcional al tipo de letra para asegurar que el contenido cabe en el espacio asignado.

p {
  float: left;
  width: 5em;
  height: 5em;
  margin: 3px;
  padding: 3px;
  border: black 2px solid;
}

Enlace externo

Tamaño de los elementos que contienen elementos flotantes

Los elementos flotantes no se tienen en cuenta al calcular el tamaño de los elementos que los contienen. Por ejemplo, si un imagen flotante forma parte de una división con borde, la imagen puede "salirse" del borde, como se ve en siguiente ejemplo:

div {
  border: black 3px solid;
}

img {
  float: left;
}
Enlace externo

Para que los elementos flotantes se tengan en cuenta al calcular el tamaño de los elementos que los contienen, se puede utilizar la propiedad overflow con el valor auto en el elemento contenedor.

div {
  border: black 3px solid;
  overflow: auto;
}

img {
  float: left;
}
Enlace externo