Flotamiento CSS

Con las propiedades float y clear del CSS podemos especificarle a las etiquetas que floten o no dentro de la página.

La propiedad float

La propiedad float es útil para el posicionamiento y diseño de una página web.

La propiedad float puede tener uno de los siguientes valores:

left : La etiqueta HTML flota a la izquierda de su etiqueta contenedora.
right : La etiqueta HTML flota a la derecha de su etiqueta contenedora.
none : La etiqueta HTML no flota. Este es el valor predeterminado.
inherit : La etiqueta HTML hereda el valor de float de su etiqueta contenedora.

El valor right

La declaración float: right; especifica que la etiqueta HTML debe flotar a la derecha en relación a su etiqueta contenedora.

En la siguiente ejemplo se especifica que una imagen debe flotar a la derecha del texto:

img {
  float: right;
}

Muestra:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac...

El valor left

La declaración float: left; especifica que la etiqueta HTML debe flotar a la izquierda en relación a su etiqueta contenedora.

En la siguiente ejemplo se especifica que una imagen debe flotar a la izquierda del texto:

img {
  float: left;
}

Muestra:

El valor none

La declaración float: none; especifica que la etiqueta HTML no debe de flotar. Este el valor predeterminado para todas las etiquetas.

En el siguiente ejemplo se especifica que una imagen no deba flotar, continuando su flujo al igual que el texto:

img {
  float: none;
}

Muestra:

La propiedad clear

La propiedad clear evita que puedan flotar etiquetas a su lado, ya sea a la izquierda, derecha o ambos.

La propiedad clear puede tener uno de los siguientes valores:

none: Permite etiquetas flotantes en ambos lados. Este valor es el predeterminado.
left: No permite etiquetas flotantes del lado izquierdo.
right: No permite etiquetas flotantes del lado derecho.
both: No permite etiquetas flotantes ninguno de los lados.
inherit: Hereda el valor de la propiedad clear de su etiqueta contenedora.

La forma más común de usar la propiedad clear es después de haber utilizado una propiedad float en un elemento. Cuando se limpia el flotamiento de una etiqueta, debe coincidir la limpieza con el flotamiento. Si una etiqueta flota a la izquierda entonces se debe limpiar a la izquierda. El elemento continuara flotando, pero el elemento limpiado aparecerá debajo en el flujo de la página web.

El siguiente ejemplo limpia el flotamiento a la izquierda, lo que significa que no permitirá elementos con flotamiento a la izquierda.

div {
  clear: left;
}

Sí una etiqueta es más alta que la etiqueta contenedora y tiene flotamiento, se desbordara fuera de la etiqueta contenedora.

Muestra:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum ...

Para evitar este desbordamiento podemos agregar la declaración overflow: auto; a la etiqueta contenedora para evitar este problema:

.clearfix {
  overflow: auto;
}

La declaración overflow: auto; funciona bien mientras se tenga el control correcto de los márgenes y espaciados (margin y padding), de lo contrario se mostrarán las barras de desplazamiento. Sin embargo, la siguiente manera de limpiar es más seguro de usar:

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Nota: ::after es una pseudo-elemento que veremos más adelante.

Imágenes lado a lado

Con la propiedad float es posible flotar imágenes lado a lado:

.img-flotantes {
  float: left;
  width: 33.33%;
  padding: 5px;
}

Muestra:

Imagen de prueba 1 de 1

Menú de Navegación Horizontal

Con la propiedad float es posible también crear un menú de navegación horizontal usando listas con enlaces (ligas):

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
li a:hover {
  background-color: #111;
}
.active {
  background-color: red;
}

Diseño o Maquetación Web

Es también muy común diseñar plantillas web usando la propiedad float:

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}
.column {
  float: left;
  padding: 15px;
}
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}
.menu {
  width: 25%;
}
.content {
  width: 75%;
}