Solucionando prolijamente problemas de clear/float en css

A más de uno nos ha tocado a la hora de armar una página la lucha de tratar de transcribir lo que en nuestra mente resultaba más sencillo armarlo con tablas.

Hoy en día las tablas (por suerte) son utilizadas para lo que realmente fueron creadas: mostrar datos tabulados relacionados. Por consiguiente, los "divs" han cobrado cierta importancia sobretodo luego de que verdaderos gurus como Jeffrey Zeldman opinaran que las "tablas estaban muertas".

Emulando el comportamiento gráfico de las tablas

Para llevar a cabo nuestra diagramación, tenemos que recurrir a los elementos html <div> (que representan una división en la pantalla). Deberemos incluir tantos divs como "paneles" tenga nuestro diseño, por lo general un documento posee:

• Encabezado (se lo suele identificar como "header")
• Columna izquierda (se la suele identifica como "left")
• Columna principal(se la suele identifica como "main")
• Eventualmente una columna derecha (se la suele identifica como "right")

Bien, hasta ahí tendríamos todo más o menos claro, pero, hace falta solucionar problemas de visualización estrictamente para que tomen la apariencia que nosotros queremos.

Uno de los principales problemas a los que nos enfrentaremos suelen ser los "floats" (la propiedad css "float").

Cada vez que hacemos que un elemento "flote" el mismo impacta en el resto de la página, siendo necesario revertir dicho comportamiento para restaurar al flujo normal del documento.

La forma que más he visto es la sencilla solución de incluir un div con la propiedad "clear":

<div style="clear: left">

Sucede que eso desde un punto de vista más purista y semántico no es una solución muy correcta que digamos.
¿Por qué? ...bueno, para empezar, estamos agregando código en el documento para simplemente evitar un problema estrictamente relacionado a la visualización de nuestra página.

Claro que podríamos mejorar lo anterior simplemente añadiendo nuestro código inline dentro de un una clase css:

<div class="clearfix">

y en nuestra css copiar lo que anteriormente teníamos en nuestro div:

.clearfix{
   clear: left
}

Si bien esto es más prolijo, seguimos teniendo el mismo problema de fondo...estamos agregando código al documento por el mero hecho de querer solucionar un problema "gráfico".

¿Cuál es la solución entonces más prolija y semánticamente más correcta?

Lo más correcto obviamente sería delegar esta responsabilidad a la CSS, ya que es la encargada de controlar el aspecto de nuestro documento.

Pero ¿cómo?, ¿todo esto no se originó justamente por problemas de estilos?
Si, pero también la solución está ahí mismo ;-)

Las CSS poseen una potencia bastante grande y muchas veces se las limita al uso de clases (lo cual genera CSS kilométricas y redundantes...ya hablaremos de ello en otro post).

Aunque Ud. no lo crea, las CSS poseen una capacidad bastante desconocida que les permite generar contenido...sí, así mismo: una css puede "inyectar" contenido a un documento. Por si fuera poco además pueden generar contenido antes o después de un elemento!, por lo tanto, perfectamenet podemos recrear lo anterior pero desde la propia CSS, dejándonos entonces una solución elegante y correcta.

Veamos como quedaría nuestra clase "clearfix" aplicando todo esto:

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

Veamos que es lo que está generando entonces nuestra clase "clearfix" paso a paso:

.clearfix:after {/*after es un pseudo elemento que se generará a continuación de nuestro div con la clase "clearfix"*/
    content: ".";/* Esto genera un "." como un texto en el div con la clase "clearfix"*/
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

El resto del código CSS se encargará de que nuestro querido Internet Explorer en sus distintas versiones interprete correctamente lo que queremos que haga.