36-clear and clearfix en CSS

---

36 - clear and clearfix en CSS

• The clear Property
• The clearfix Hack

---

The clear Property

La propiedad clear se usa para especificar qué debe suceder con un elemento que está al lado de un elemento flotante. Es útil cuando tenemos un elemento flotante y queremos que el siguiente elemento se muestre por debajo de él, en lugar de aparecer a su lado.

Los valores posibles de la propiedad clear son:

• none: El elemento no se empuja hacia abajo, ni por los elementos flotados a la izquierda ni a la derecha. Este es el valor por defecto.
• left: El elemento se empuja hacia abajo debajo de los elementos flotados a la izquierda.
• right: El elemento se empuja hacia abajo debajo de los elementos flotados a la derecha.
• both: El elemento se empuja hacia abajo debajo de ambos elementos flotados (a la izquierda y a la derecha).
• inherit: El elemento hereda el valor clear de su elemento padre.

Al utilizar la propiedad clear, es importante hacer coincidir el valor de clear con la dirección del flotante. Si un elemento está flotado a la izquierda, entonces el valor de clear debe ser left para que el siguiente elemento se muestre debajo de él. Si el flotante está en la derecha, entonces debe usarse right.

Ejemplo Visual: Imagen con clearfix vs sin clearfix

En este ejemplo, verás cómo la propiedad clearfix afecta al comportamiento de las imágenes flotadas. La imagen de la izquierda está dentro de un contenedor con clearfix, mientras que la imagen de la derecha está dentro de un contenedor sin clearfix.

Este es un ejemplo de imagen flotada a la izquierda con clearfix. El contenedor ahora ajusta correctamente su altura al contenido flotado, evitando el desbordamiento.

Este es un ejemplo de imagen flotada a la izquierda sin clearfix. Como puedes ver, el contenedor no se ajusta correctamente a la altura de la imagen, lo que hace que la imagen se desborde fuera del contenedor.

---

...

Ejemplo Visual de la propiedad clear

En este ejemplo, se muestran varios elementos flotados con diferentes valores de la propiedad clear. Se puede observar cómo el uso de clear afectará el comportamiento del contenedor y los elementos a su alrededor.

Elemento flotado a la izquierda

Otro elemento flotado a la izquierda

Elemento con clear: left, debe aparecer debajo de los flotantes a la izquierda.

Elemento flotado a la izquierda

Otro elemento flotado a la izquierda

Elemento con clear: right, debe aparecer debajo de los flotantes a la derecha.

Elemento flotado a la izquierda

Otro elemento flotado a la izquierda

Elemento con clear: both, debe aparecer debajo de ambos elementos flotados.

---

The clearfix Hack

El clearfix hack es una solución común para resolver un problema que ocurre cuando un elemento flotado es más alto que su contenedor. En este caso, el elemento flotado se desbordará fuera de su contenedor, lo cual no es deseado. Para evitar esto, se puede aplicar el clearfix hack, que obliga al contenedor a ajustarse al contenido flotado dentro de él.

Una forma tradicional de solucionar este problema es utilizando la propiedad overflow: auto;, sin embargo, esta opción puede causar barras de desplazamiento no deseadas si no se controla adecuadamente el margen y el relleno del contenedor.

Una solución más moderna y segura es utilizar el clearfix hack, que aplica una técnica basada en un pseudo-elemento vacío para asegurar que el contenedor ajuste su altura de acuerdo con los elementos flotados. El siguiente es un ejemplo de código para implementar el clearfix hack:

<style>
    .clearfix::after {
        content: "";
        display: table;
        clear: both;
    }
</style>
<div class="clearfix">
    <div style="float: left; width: 50%">Contenido flotado izquierdo</div>
    <div style="float: right; width: 50%">Contenido flotado derecho</div>
</div>
            

Este código asegura que el contenedor con la clase clearfix "limpie" los elementos flotados, de modo que el contenedor ajustará su altura correctamente sin que el contenido se desborde.

---

Ejemplo Visual del clearfix Hack

En este ejemplo, se aplica el clearfix hack a un contenedor que tiene dos elementos flotados. Gracias al uso de la pseudo-clase ::after, el contenedor se ajusta correctamente a la altura de los elementos flotados, evitando el desbordamiento.

Contenido flotado a la izquierda

Contenido flotado a la derecha

---

Ir al índice

---

---