CSS 2: Posicionamiento flotante

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%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo
p.capital:first-letter {
  float: left;
  background-color: pink;
  color: red;
  font-family: monospace;
  font-size: 400%;
}
ERROR (no puede mostrarse el objeto)
Enlace externo

Nota: Firefox no muestra los dos ejemplos de la misma manera, mientras que Chrome y Edge sí lo hacen.

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

Logotipo de GNU (GNU is Not Unix) Este párrafo tiene insertada una imagen al principio del párrafo. Se trata del logotipo de GNU. GNU es un acrónimo recursivo que significa "GNU is Not Unix" (GNU No es Unix). GNU es un proyecto de software libre iniciado por Richard Stallman en 1984. La imagen forma parte del párrafo, es una letra más en la primera línea.


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

Logotipo de GNU (GNU is Not Unix) Este párrafo tiene insertada una imagen al principio del párrafo. Se trata del logotipo de GNU. GNU es un acrónimo recursivo que significa "GNU is Not Unix" (GNU No es Unix). GNU es un proyecto de software libre iniciado por Richard Stallman en 1984. La imagen debe "flotar" a la izquierda y el texto debe fluir a su derecha.

img {
  float: right;
}

Logotipo de GNU (GNU is Not Unix) Este párrafo tiene insertada una imagen al principio del párrafo. Se trata del logotipo de GNU. GNU es un acrónimo recursivo que significa "GNU is Not Unix" (GNU No es Unix). GNU es un proyecto de software libre iniciado por Richard Stallman en 1984. La imagen debe "flotar" a la derecha y el texto debe fluir a su izquierda.


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>
Logotipo de GNU (GNU is Not Unix) Tux, la mascota de Linux GNU + Linux = GNU/Linux. El término GNU/Linux reconoce la contribución del proyecto GNU en la creación de sistemas operativos libres.

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>
Logotipo de GNU (GNU is Not Unix) Tux, la mascota de Linux GNU + Linux = GNU/Linux. El término GNU/Linux reconoce la contribución del proyecto GNU en la creación de sistemas operativos libres.
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>
Logotipo de GNU (GNU is Not Unix) GNU + Linux = GNU/Linux. El término GNU/Linux reconoce la contribución del proyecto GNU en la creación de sistemas operativos libres.Tux, la mascota de Linux
Las dos imágenes están insertadas al final del texto:
<p>Texto<img class="izquierda" /><img class="derecha" /></p>
GNU + Linux = GNU/Linux. El término GNU/Linux reconoce la contribución del proyecto GNU en la creación de sistemas operativos libres.Logotipo de GNU (GNU is Not Unix) Tux, la mascota de Linux

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>
Logotipo de GNU (GNU is Not Unix) Tux, la mascota de Linux GNU + Linux = GNU/Linux. El término GNU/Linux reconoce la contribución del proyecto GNU en la creación de sistemas operativos libres.
Las dos imágenes están insertadas antes del texto:
<p><img class="derecha" /><img class="izquierda" />Texto</p>
Tux, la mascota de Linux Logotipo de GNU (GNU is Not Unix) GNU + Linux = GNU/Linux. El término GNU/Linux reconoce la contribución del proyecto GNU en la creación de sistemas operativos libres.

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

Logotipo de GNU (GNU is Not Unix) El logotipo de GNU debe "flotar" a la izquierda y el párrafo debe fluir a su derecha.


Tux, la mascota de Linux El logotipo de Linux, Tux, debe "flotar" a la izquierda y el párrafo debe fluir a su derecha. Seguramente tanto la imagen como el párrafo están a la derecha del logotipo de GNU.

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

Logotipo de GNU (GNU is Not Unix) El logotipo de GNU debe "flotar" a la izquierda y el párrafo debe fluir a su derecha.


Tux, la mascota de Linux El logotipo de Linux, Tux, debe "flotar" a la izquierda y el párrafo debe fluir a su derecha. La línea intermedia impide que se monten sobre el párrafo anterior.

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

Logotipo de GNU (GNU is Not Unix)

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;
}
ERROR (no puede mostrarse el objeto)
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;
}

ERROR (no puede mostrarse el objeto)
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;
}
ERROR (no puede mostrarse el objeto)
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;
}
ERROR (no puede mostrarse el objeto)
Enlace externo