¿Qué es un clearfix?

Recientemente estaba buscando el código de un sitio web y vi que todos <div> tenían una clase clearfix.

Después de una búsqueda rápida en Google, aprendí que a veces es para IE6, pero ¿qué es realmente un clearfix?

¿Podría proporcionar algunos ejemplos de un diseño con clearfix, en comparación con un diseño sin clearfix?

Si no necesita admitir IE9 o inferior, puede usar flexbox libremente, y no necesita usar diseños flotantes.

Vale la pena señalar que hoy en día, el uso de elementos flotantes para el diseño se desalienta cada vez más con el uso de mejores alternativas.

• display: inline-block - Mejor
• Flexbox : el mejor (pero limitado soporte de navegador)

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

Para obtener una lista detallada del navegador, consulte: https://caniuse.com/flexbox .

(Quizás una vez que su posición se haya establecido por completo, puede ser la forma absolutamente recomendada de diseñar elementos).

Un clearfix es una forma en que un elemento borra automáticamente sus elementos secundarios , de modo que no necesita agregar un marcado adicional. Generalmente se usa en diseños de flotación donde los elementos flotan para apilarse 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 debería hacer algo de la siguiente manera:

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

Con clearfix, solo necesita lo siguiente:

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

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

Las otras respuestas son correctas. Pero quiero agregar que es una reliquia de la época en que las personas aprendían CSS por primera vez, y abusaron floatde hacer todo su diseño. floatestá destinado a hacer cosas como imágenes flotantes junto a largos tramos de texto, pero mucha gente lo usó como su mecanismo de diseño principal. Como en realidad no estaba destinado a eso, necesitas trucos como "clearfix" para que funcione.

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

El clearfixpermite que un recipiente para envolver sus hijos flotaban. Sin un clearfixestilo o equivalente, un contenedor no se enrolla alrededor de sus elementos flotantes y se derrumba, como si sus elementos flotantes estuvieran posicionados de manera absoluta.

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

Si desea soporte para navegadores antiguos, es mejor usar este clearfix:

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

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

En SCSS, puede usar la siguiente técnica:

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

    &:after {
        clear:both;
    }

    & {
        *zoom:1;
    }
}

#clearfixedelement {
    @extend %clearfix;
}

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

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

Ofrecer una actualización sobre la situación en el segundo trimestre de 2017.

Una nueva propiedad de visualización CSS3 está disponible en Firefox 53, Chrome 58 y Opera 45.

.clearfix {
   display: flow-root;
}

Verifique la disponibilidad de cualquier navegador aquí: http://caniuse.com/#feat=flow-root

El elemento (con una propiedad de visualización establecida en flow-root) genera un cuadro contenedor de bloques y presenta su contenido mediante el diseño de flujo. Siempre establece un nuevo contexto de formato de bloque para sus contenidos.

Lo que significa que si usa un div padre que contiene uno o varios hijos flotantes, esta propiedad garantizará que el padre incluya a todos sus hijos. Sin necesidad de un hack clearfix. En cualquier elemento secundario, ni siquiera en un último elemento ficticio (si estaba utilizando la variante clearfix con: before en los últimos elementos secundarios).

.container {
  display: flow-root;
  background-color: Gainsboro;
}

.item {
  border: 1px solid Black;
  float: left;
}

.item1 {  
  height: 120px;
  width: 120px;
}

.item2 {  
  height: 80px;
  width: 140px;
  float: right;
}

.item3 {  
  height: 160px;
  width: 110px;
}

<div class="container">
  This container box encloses all of its floating children.
  <div class="item item1">Floating box 1</div>
  <div class="item item2">Floating box 2</div> 
  <div class="item item3">Floating box 3</div>  
</div>

En pocas palabras, clearfix es un truco .

Es una de esas cosas feas con las que todos tenemos que vivir, ya que es realmente la única forma razonable de garantizar que los elementos flotantes de los niños no desborden a sus padres. Existen otros esquemas de diseño, pero la flotación es demasiado común en el diseño / desarrollo web hoy en día como para ignorar el valor del hack de clearfix.

Personalmente me inclino hacia la solución Micro Clearfix (Nicolas Gallagher)

.container:before,
.container:after {
  content:"";
  display:table;
}
.container:after {
  clear:both;
}
.container {
  zoom:1; /* For IE 6/7 (trigger hasLayout) */
}

referencia

Una técnica comúnmente utilizada en diseños basados ​​en flotante CSS es asignar un puñado de propiedades CSS a un elemento que sabe que contendrá elementos flotantes. La técnica, que comúnmente se implementa usando una definición de clase llamada clearfix, (generalmente) 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 :afterdel elemento activo que contenga un solo '.' marcado como oculto, lo que borrará todos los flotantes preexistentes y restablecerá efectivamente la página para el siguiente contenido.

La otra opción (y quizás la más simple) para obtener un clearfix es usar overflow:hidden;el elemento contenedor. Por ejemplo

.parent {
  background: red;
  overflow: hidden;
}
.segment-a {
  float: left;
}
.segment-b {
  float: right;
}

<div class="parent">
  <div class="segment-a">
    Float left
  </div>
  <div class="segment-b">
    Float right
  </div>
</div>

Por supuesto, esto solo puede usarse en casos en los que nunca desee que el contenido se desborde.

Probé la respuesta aceptada pero aún tenía problemas con la alineación del contenido. Agregar un selector ": before" como se muestra a continuación solucionó el problema:

// LESS HELPER
.clearfix()
{
    &:after, &:before{
       content: " "; /* Older browser do not support empty content */
       visibility: hidden;
       display: block;
       height: 0;
       clear: both;
    }
}

MENOS arriba se compilará a CSS a continuación:

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

Aquí hay un método diferente, lo mismo pero un poco diferente

la diferencia es el punto de contenido que se reemplaza con un \00A0==whitespace

Más sobre esto http://www.jqui.net/tips-tricks/css-clearfix/

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;}
.clearfix{ display: inline-block;}
html[xmlns] .clearfix { display: block;}
* html .clearfix{ height: 1%;}
.clearfix {display: block}

Aquí hay una versión compacta de la misma ...

.clearfix:after { content: "\00A0"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;width:0;font-size: 0px}.clearfix{ display: inline-block;}html[xmlns] .clearfix { display: block;}* html .clearfix{ height: 1%;}.clearfix {display: block}