OmbuShop Crea Tu Tienda Online

CSS: técnicas de clearfix

  • Facebook
  • Twitter
  • LinkedIn
  • StumbleUpon
  • Email
  • RSS

Los elementos flotados se comportan de formas inesperadas y poco intuitivas para quienes recién comienzan a aprender CSS. A continuación, las técnicas más utilizadas para realizar lo que comúnmente llamamos clearfix hack.

Este asunto es largamente conocido por los frontenders experimentados: cuando un elemento está flotado, es extraído del normal flujo de la página; comienza a comportarse de forma alternativa. Consecuentemente, cuando todos los hijos (children) de cierto elemento están flotados, éstos dejan de ocupar lugar en el interior de su padre (parent), lo que resulta en el colapso de la altura del elemento contenedor.

¿¡Cómo!?

En resumen: cuando en el interior de un elemento habitan únicamente elementos flotados, la altura de dicho elemento se colapsará. A continuación un ejemplo:

See the Pen JgHwt by Lucas Mourelle (@lucasmourelle) on CodePen.0

La solución a este problema suele llamarse clearfix hack, y existen varios métodos para lograr el resultado deseado. Veremos los dos métodos más populares para evitar que se colapse la altura del elemento contenedor. Resultan poco intuitivos, pero su utilización es sencilla.

Método 1: “overflow”

Es el método más sencillo y minimalista. Implica el agregado de una única línea de código al CSS. Básicamente, lo que se hace es setear la propiedad overflow del padre, al valor auto. A continuación vemos el código.

See the Pen Ddlzo by Lucas Mourelle (@lucasmourelle) on CodePen.0

La desventaja de este método radica en que la propiedad overflow tiene otra función. Algunas veces necesitamos poder indicar otro valor para esta propiedad, y otras veces simplemente la consecuencia de su utilización no nos sirve para el diseño que estamos trabajando.

Método 2: “micro”

Es un poco más complejo, pero es el más popular hoy en día. A diferencia del método “overflow” carece de efectos secundarios. Lo que hacemos es utilizar la posibilidad de crear pseudo-elementos en CSS. Daremos indicaciones de CSS para los pseudo-elementos before y after. Veremos el ejemplo a continuación.

See the Pen iFkav by Lucas Mourelle (@lucasmourelle) on CodePen.0

Por supuesto, eso mismo puede aplicarse a una clase (e.g. clearfix) y aplicarlo a cuanto elemento lo requiera, evitando la repetición de código.

¡Esperamos que les sea útil!