1054 votos

¿Qué es clearfix?

Recientemente estaba revisando el código de un sitio web, y vi que cada <div> tenía una clase clearfix .

Después de una rápida búsqueda en Google, me enteré de que es para IE6 a veces, pero lo que en realidad ¿es un clearfix?

¿Podría dar algunos ejemplos de un diseño con un clearfix, comparado con un diseño sin clearfix?

67 votos

No es para IE 6. Un clearfix asegura que un div se expandirá completamente hasta la altura adecuada para encerrar a sus hijos flotantes. webtoolkit.info/css-clearfix.html

0 votos

Este vídeo de 6 minutos en YouTube lo explica mejor que estas respuestas OMI youtube.com/

1027voto

Second Rikudo Puntos 59550

Si no necesitas soportar IE9 o inferior, puedes usar flexbox libremente, y no necesitas usar diseños flotados.

Cabe destacar que hoy en día, el uso de elementos flotados para la maquetación se está desaconsejando cada vez más con el uso de mejores alternativas.

  • display: inline-block - Mejor
  • Flexbox - Lo mejor (pero con compatibilidad limitada con los navegadores)

Flexbox es compatible con Firefox 18, Chrome 21, Opera 12.10 e Internet Explorer 10, Safari 6.1 (incluido Mobile Safari) y el navegador por defecto de Android 4.4.

Para ver una lista detallada de los navegadores, consulte: https://caniuse.com/flexbox .

(Tal vez, una vez que se establezca completamente su posición, sea la forma absolutamente recomendada de disponer los elementos).


Un clearfix es una forma de que un elemento borrar automáticamente sus elementos hijos para no tener que añadir marcas adicionales. Generalmente se utiliza en diseños de flotadores donde los elementos son flotados para ser apilados horizontalmente.

El clearfix es una forma de combatir el problema del contenedor de altura cero para elementos flotantes

Un clearfix se realiza de la siguiente manera:

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

O, si no necesita soporte para IE<8, lo siguiente también está bien:

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

Normalmente, tendría que hacer algo como lo siguiente:

<div>
    <div style="float: left;">Sidebar</div>
    <div style="clear: both;"></div> <!-- Clear the float -->
</div>

Con clearfix, sólo necesitas lo siguiente:

<div class="clearfix">
    <div style="float: left;" class="clearfix">Sidebar</div>
    <!-- No Clearing div! -->
</div>

Lea sobre ello en este artículo - por Chris Coyer @ CSS-Tricks

2 votos

De cualquier manera por la razón que sea un espacio en blanco es una mejor práctica que un punto, he tenido problemas con el punto en algunos navegadores por eso lo mencioné :) un poco de mejora no hace daño :)

2 votos

content: "\00A0"; el \00A0 representar un espacio en blanco, un simple espacio en blanco no funciona bien :) lo siento.)

15 votos

@MadaraUchiha, ¿por qué es mejor display:inline-block que los elementos flotantes? El único problema que tengo es que mostrar con inline block causa problemas si hay espacios en blanco entre las etiquetas, lo que no siempre es fácil de controlar.

72voto

Domenic Puntos 40761

Las otras respuestas son correctas. Pero quiero añadir que es una reliquia de la época en que la gente estaba aprendiendo CSS por primera vez, y abusó de float para hacer todo su diseño. float está pensado para hacer cosas como hacer flotar imágenes junto a largas tiradas de texto, pero mucha gente lo utiliza como mecanismo principal de diseño. Como no estaba pensado para eso, se necesitan trucos como "clearfix" para que funcione.

En estos días display: inline-block es una alternativa sólida ( excepto para IE6 e IE7 ), aunque los navegadores más modernos vienen con mecanismos de diseño aún más útiles bajo nombres como flexbox, grid layout, etc.

1 votos

En mi práctica he llegado a la conclusión de que no hay razón para usar el flotador nunca. Siempre que lo usas la mitad de las cosas se rompen. Sólo lo usaría cuando necesito cosas para conjurar dentro de un div. Inline-block es impresionante. El nuevo modelo de caja es impresionante. Así que no más hacks para ir a la alineación vertical.

51 votos

inline-block no es una mejora estricta con respecto a los flotadores debido a el problema del espacio entre bloques donde los espacios en blanco en el HTML se traducen en caracteres de espacio que separan los bloques. inline-block requiere soluciones propias , al igual que float requiere clearfix.

46voto

John Slegers Puntos 509

El clearfix permite que un contenedor envuelva a sus hijos flotantes. Sin un clearfix o un estilo equivalente, un contenedor no se envuelve alrededor de sus hijos flotados y se colapsa, como si sus hijos flotados estuvieran posicionados absolutamente.

Hay varias versiones del clearfix, con Nicolas Gallagher y Thierry Koblentz como autores principales.

Si quieres compatibilidad con navegadores antiguos, lo mejor es utilizar este clearfix :

.clearfix:before, .clearfix:after {
    content: "";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

En SCSS, puede utilizar la siguiente técnica :

%clearfix {
    &:before, &:after {
        content:" ";
        display:table;
    }

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

Si no te importa soportar navegadores antiguos, hay una versión más corta :

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

1 votos

Buena respuesta, John. Lo que me pregunto es por qué claro hace el div ¿envolver los elementos flotantes? ¿Puedes ayudarme a visualizarlo?

0 votos

@AlexanderSuraphel : Esta respuesta lo explica en detalle -> stackoverflow.com/questions/12871710/

9voto

Sergio Tulentsev Puntos 82783

Esta es una forma de tratar los elementos flotados. Sin ella, los contenedores padre de esos elementos podrían tener la altura rota.

Ver esto

Un ejemplo

6voto

Nathan Taylor Puntos 13582

Una técnica comúnmente utilizada en los diseños basados en la float de CSS es la asignación de un puñado de propiedades CSS a un elemento que usted sabe que contendrá elementos flotantes. Esta técnica, que suele implementarse mediante una definición de clase llamada clearfix , (normalmente) implementa los siguientes comportamientos CSS:

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

El propósito de estos comportamientos combinados es crear un contenedor :after el elemento activo que contiene un solo '.' marcado como oculto que borrará todos los flotadores preexistentes y restablecerá efectivamente la página para la siguiente pieza de contenido.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X