Limpiar floats en CSS

La principal característica de los elementos posicionados de forma flotante mediante la propiedad float es que desaparecen del flujo normal del documento. De esta forma, es posible que algunos o todos los elementos flotantes se salgan de su elemento contenedor.

La siguiente imagen muestra un elemento contenedor que encierra a dos elementos de texto. Como los elementos interiores están posicionados de forma flotante y el elemento contenedor no dispone de más contenidos, el resultado es el siguiente:

 Los elementos posicionados de forma flotante se salen de su elemento contenedor

El código HTML y CSS del ejemplo anterior se muestra a continuación:

<div id="contenedor">
  <div id="izquierda">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis molestie turpis vitae ante.</div>
  <div id="derecha">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla bibendum mi non lacus.</div>
</div>
#contenedor {
  border: thick solid #000;
}

#izquierda {
  float: left;
  width: 40%;
}

#derecha {
  float: right;
  width: 40%;
}

La solución tradicional de este problema consiste en añadir un elemento invisible después de todos los elementos posicionados de forma flotante para forzar a que el elemento contenedor tenga la altura suficiente. Los elementos invisibles más utilizados son <div>, <br> y <p>.

De esta forma, si se añade un elemento <div> invisible con la propiedad clear de CSS en el ejemplo anterior:

<div id="contenedor">
  <div id="izquierda">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis molestie turpis vitae ante.</div>
  <div id="derecha">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla bibendum mi non lacus.</div>
  <div style="clear: both"></div>
</div>
Solución tradicional al problema de los elementos posicionados de forma flotante

Solución tradicional al problema de los elementos posicionados de forma flotante

La técnica de corregir los problemas ocasionados por los elementos posicionados de forma flotante se suele denominar “limpiar los float”.

Aunque añadir un elemento invisible corrige correctamente el problema, se trata de una solución poco elegante e incorrecta desde el punto de vista semántico. No tiene ningún sentido añadir un elemento vacío en el código HTML, sobre todo si ese elemento se utiliza exclusivamente para corregir el aspecto de los contenidos.
Afortunadamente, existe una solución alternativa para limpiar los float que no obliga a añadir nuevos elementos HTML y que además es elegante y muy sencilla. La solución consiste en utilizar la propiedad overflow de CSS sobre el elemento contenedor. El autor de la solución es el diseñador Paul O’Brien y se publicó por primera vez en

Si se modifica el código CSS anterior y se incluye la siguiente regla:

#contenedor {
  border:   thick solid #000;
  overflow: hidden;
}

Ahora, el contenedor encierra correctamente a los dos elementos <div> interiores y no es necesario añadir ningún elemento adicional en el código HTML. Además del valor hidden, también es posible utilizar el valor auto obteniendo el mismo resultado.
Esta solución funciona correctamente en todas las versiones recientes de los navegadores, incluyendo Internet Explorer 7 y 8. No obstante, en las versiones anteriores de Internet Explorer es necesario añadir cualquier propiedad CSS que obligue al navegador a considerar que el elemento contenedor ocupa sitio en la página.
Técnicamente, esta estrategia se conoce como forzar a que Internet Explorer active la propiedad hasLayout sobre el elemento. A continuación se muestran algunas técnicas sencillas para conseguirlo:

/* Funciona correctamente con cualquier navegador */
#contenedor {
  border:   thick solid #000;
  overflow: hidden;
  width:    100%;
}

/* Funciona correctamente con cualquier navegador */
#contenedor {
  border:   thick solid #000;
  overflow: hidden;
  height:   1%;
}

/* La propiedad zoom no es parte del estándar CSS, por lo
   que esta hoja de estilos no validaría */
#contenedor {
  border:   thick solid #000;
  overflow: hidden;
  zoom:     1;
}

/* El truco del guión bajo delante de las propiedades CSS sólo
   lo interpreta correctamente la versión 6 de Internet Explorer */
#contenedor {
  border:   thick solid #000;
  overflow: hidden;
  _height:  1%;
}

De todas las soluciones anteriores, la más utilizada es la que establece la propiedad height: 1%, ya que normalmente es la que menos afecta al aspecto del elemento contenedor. Considerando todo lo anterior, a continuación se muestra la solución definitiva para limpiar los floats, que es compatible con todos los navegadores y que hace que la hoja de estilos sea válida:

#contenedor {
  border:   thick solid #000;
  overflow: hidden;
  height:   1%;
}

#izquierda {
  float: left;
  width: 40%;
}

#derecha {
  float: right;
  width: 40%;
}

La propiedad hasLayout de Internet Explorer

El navegador Internet Explorer 7 y sus versiones anteriores incluyen decenas de errores relacionados con CSS. La mayoría de esos errores se pueden solucionar con trucos y técnicas que aprovechan otros errores o características del navegador. Además, muchos errores se solucionan gracias a la propiedad hasLayout de Internet Explorer.

En efecto, muchas soluciones de los errores de Internet Explorer consisten en “forzar a un elemento a que tenga un layout”. El motivo es que para mostrar los elementos de una página, el navegador Internet Explorer divide a todos los elementos en dos grupos:

  • Los elementos cuyo tamaño y posición dependen de su elemento contenedor.
  • Los elementos que establecen su propio tamaño y posición.

La mayoría de elementos de una página son del primer tipo, ya que sus elementos contenedores (normalmente el elemento <body>) determinan su tamaño y posición. Los elementos del segundo tipo son los que Internet Explorer considera que tienen un layout.

Los elementos HTML que por defecto tienen un layout en Internet Explorer son:

  • <html>, <body>
  • <table>, <tr>, <th>, <td>
  • <img>
  • <hr>
  • <input>, <button>, <select>, <textarea>, <fieldset>, <legend>
  • <iframe>, <embed>, <object>, <applet>
  • <marquee>

No obstante, algunas propiedades CSS provocan que el elemento tenga un layout y por tanto, activan la propiedad hasLayout. La siguiente tabla muestra todas las propiedades CSS y valores que hacen que un elemento tenga un layout:

Propiedad Valores que activan la propiedad hasLayout Comentarios
position absolute, fixed fixed sólo en Internet Explorer 7
float left, right
display inline-block
width Cualquier valor que no sea auto
min-width Cualquier valor Sólo en Internet Explorer 7
max-width Cualquier valor Sólo en Internet Explorer 7
height Cualquier valor que no sea auto
min-height Cualquier valor Sólo en Internet Explorer 7
max-height Cualquier valor Sólo en Internet Explorer 7
zoom Cualquier valor que no sea normal
writing-mode tb-rl
overflow hidden, scroll, auto Sólo en Internet Explorer 7

Las propiedades zoom y writing-mode no se definen en ningún estándar de CSS porque son propietarias del navegador Internet Explorer. Si se utilizan estas dos propiedades, la hoja de estilos no pasa satisfactoriamente el proceso de validación.

Para quitar el layout a un elemento, es necesario establecer el valor por defecto de todas las propiedades de la tabla anterior que hayan sido modificadas:

  • width: auto, height: auto
  • max-width: auto, min-width: auto
  • position: static
  • float: none
  • overflow: visible
  • zoom: normal
  • writing-mode: lr-tb

Utilizando alguna de las propiedades CSS anteriores se han ideado numerosas soluciones para forzar a que un elemento tenga un layout. Uno de los trucos más conocidos desde hace muchos años es el famoso Holly hack que soluciona un problema con un elemento posicionado de forma flotante aplicando la siguiente regla:

.selector {
  height: 1%;
}

En el navegador Internet Explorer 6 se puede utilizar el truco del guión bajo y la propiedad height para forzar a un elemento a que tenga layout:

.selector {
  _height: 1%;
}

En Internet Explorer 7 se puede utilizar la propiedad min-height utilizando cualquier valor, incluso el 0:

.selector {
  min-height: 0;
}

Otra propiedad muy utilizada en Internet Explorer 7 es zoom, aunque no es una propiedad estándar de CSS:

.selector {
  zoom: 1;
}

?

La propiedad shorthand en CSS

Algunas propiedades del estándar CSS 2.1 son especiales, ya que permiten establecer simultáneamente el valor de varias propiedades diferentes. Este tipo de propiedades se denominan “propiedades shorthand” y todos los diseñadores web profesionales las utilizan.

La gran ventaja de las propiedades shorthand es que permiten crear hojas de estilos mucho más concisas y por tanto, mucho más fáciles de leer. A continuación se incluye a modo de referencia la definición formal de las seis propiedades shorthand disponibles en el estándar CSS 2.1.

font Tipografía
Valores ( ( <font-style> || <font-variant> || <font-weight> )? <font-size> ( / <line-height> )? <font-family> ) | caption | icon | menu | message-box | small-caption | status-bar | inherit
Se aplica a Todos los elementos
Valor inicial
Descripción Permite indicar de forma directa todas las propiedades de la tipografía de un texto
margin Margen
Valores ( <medida> | <porcentaje> | auto ) {1, 4} | inherit
Se aplica a Todos los elementos salvo algunos casos especiales de elementos mostrados como tablas
Valor inicial
Descripción Establece de forma directa todos los márgenes de un elemento
padding Relleno
Valores ( <medida> | <porcentaje> ){1, 4} | inherit
Se aplica a Todos los elementos excepto algunos elementos de tablas como grupos de cabeceras y grupos de pies de tabla
Valor inicial
Descripción Establece de forma directa todos los rellenos de los elementos
border Estilo completo de todos los bordes
Valores ( <border-width> || <border-color> || <border-style> ) | inherit
Se aplica a Todos los elementos
Valor inicial
Descripción Establece el estilo completo de todos los bordes de los elementos
background Fondo de un elemento
Valores ( <background-color> || <background-image> || <background-repeat> || <background-attachment> || <background-position> ) | inherit
Se aplica a Todos los elementos
Valor inicial
Descripción Establece todas las propiedades del fondo de un elemento
list-style Estilo de una lista
Valores ( <list-style-type> || <list-style-position> || <list-style-image> ) | inherit
Se aplica a Elementos de una lista
Valor inicial
Descripción Propiedad que permite establecer de forma simultanea todas las opciones de una lista

Si se considera la siguiente hoja de estilos:

p {
  font-style: normal;
  font-variant: small-caps;
  font-weight: bold;
  font-size: 1.5em;
  line-height: 1.5;
  font-family: Arial, sans-serif;
}
div {
  margin-top: 5px;
  margin-right: 10px;
  margin-bottom: 5px;
  margin-left: 10px;
  padding-top: 3px;
  padding-right: 5px;
  padding-bottom: 10px;
  padding-left: 7px;
}
h1 {
  background-color: #FFFFFF;
  background-image: url("imagenes/icono.png");
  background-repeat: no-repeat;
  background-position: 10px 5px;
}

Utilizando las propiedades shorthand es posible convertir las 24 líneas que ocupa la hoja de estilos anterior en sólo 10 líneas, manteniendo los mismos estilos:

p {
  font: normal small-caps bold 1.5em/1.5 Arial, sans-serif;
}
div {
  margin: 5px 10px;
  padding: 3px 5px 10px 7px;
}
h1 {
  background: #FFF url("imagenes/icono.png") no-repeat 10px 5px;
}