Pregunta ¿Qué es un clearfix?


Recientemente estuve mirando el código de algún sitio web, y vi que cada <div>  tenía una clase clearfix.

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

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


867
2017-12-18 19:02


origen


Respuestas:


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

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 - Mejor (pero soporte de navegador limitado)

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: http://caniuse.com/flexbox.

(Tal vez una vez que su posición se establezca por completo, puede ser la forma absolutamente recomendada de diseñar elementos).


Un clearfix es una forma de que un elemento borra automáticamente sus elementos secundarios, por lo que no necesita agregar marcado adicional. Generalmente se usa en diseños flotantes donde los elementos flotan para apilarse horizontalmente.

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

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 bien, si no necesita soporte IE <8, lo siguiente también está bien:

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

Normalmente, necesitarías 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


847
2017-12-18 19:04



Si aprende al visualizar, esta imagen puede ayudarlo a entender qué clearfix hace.

enter image description here


413
2018-04-10 13:12



Las otras respuestas son correctas. Pero quiero agregar que es una reliquia del tiempo cuando las personas estaban aprendiendo CSS por primera vez, y abusaron float para hacer todo su diseño. float está destinado a hacer cosas como imágenes flotantes junto a largas tiradas de texto, pero muchas personas lo usaron como mecanismo de diseño principal. Como en realidad no era para eso, necesitas hacks como "clearfix" para que funcione.

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


58
2017-12-18 19:08



los clearfix permite que un contenedor envuelva a sus hijos flotados. Sin un clearfix o un estilo equivalente, un recipiente no se envuelve alrededor de sus niños flotando y se derrumba, como si sus niños flotaran completamente.

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, debes usar la siguiente técnica:

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

  &:after {
    clear:both;
  }

  & {
    *zoom:1;
  }
}

#clearfixedelement {
    @extend %clearfix;
}

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

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

31
2018-04-18 09:35



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

Una nueva propiedad de pantalla 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 bloque y establece 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 utiliza un elemento primario div que contiene uno o varios elementos secundarios flotantes, esta propiedad garantizará que el elemento primario incluya todos sus elementos secundarios. Sin necesidad de un hack clearfix. En cualquier elemento secundario, ni siquiera en el último elemento ficticio (si usaba la variante de clearfix con: before en los últimos hijos).

.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>


12
2018-04-20 21:02



Simplemente pon, clearfix es un truco.

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

Personalmente me inclino por 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


10
2017-12-17 02:27



Una técnica comúnmente utilizada en los diseños basados ​​en float de CSS asigna un puñado de propiedades CSS a un elemento que usted sabe que contendrá elementos flotantes. La técnica, que comúnmente se implementa usando una definición de clase llamada clearfix, (por lo general) 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á todas las carrozas preexistentes y restablecerá efectivamente la página para la próxima pieza de contenido.


4
2017-12-18 19:09



La otra opción (y quizás la más simple) para lograr un clearfix es usar overflow:hidden; en el elemento que contiene 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 se puede usar en casos en los que nunca desees que el contenido se desborde.


2
2018-04-19 08:39



Probé la respuesta aceptada, pero todavía tenía un problema 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 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;
}

1
2018-01-13 00:56



Aquí hay un método diferente, 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 ...

.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}

0
2017-09-20 09:17



Clearfix se usa para borrar los flotadores adicionales. Es una clase agregada en el elemento padre.

Mi código de liberación está aquí ...

/* clearfix*/
.clearfix:before, .clearfix:after { content: ""; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

Aunque está copiado, pero ayudará. aquí :before y :after se usa para señalar los puntos finales y finales de ese elemento. Mientras clear:both no permitirá otros elementos flotantes en los lados derecho o izquierdo de ese elemento especificado que contenga esa clase.


-1
2017-07-24 17:11