¿Qué es un clearfix?


1004

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?


65
No es para IE 6. Un clearfix asegura que divse expandirá completamente a la altura adecuada para encerrar a sus hijos flotantes. webtoolkit.info/css-clearfix.html
Sparky

Respuestas:


983

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


1
De cualquier manera, por cualquier razón, 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é :) una pequeña mejora no va a doler :)
Val

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

14
@MadaraUchiha, ¿por qué es display: bloque en línea mejor que elementos flotantes? El único problema que tengo es que mostrar con bloque en línea causa problemas con un espacio en blanco entre las etiquetas, que no siempre es fácilmente controlable.
mowwwalker

2
@Kzqai: es por eso que flexbox es la opción preferida cuando es más ampliamente compatible.
Madara Ghost

11
No estoy de acuerdo que display: inline-blocksea ​​mejor que los flotantes para el diseño basado en bloques Los bloques en línea son, como su nombre lo indica, colocados en línea : la mayoría de los diseños se basan en bloques y hacer que estos bloques se coloquen en un contexto de formato en línea simplemente no tiene sentido. También tiene que lidiar con varios problemas asociados con el formato en línea, como el espacio en blanco entre elementos, otros elementos en línea, el tamaño, la alineación, etc., como han señalado muchos otros. Por supuesto, los diseños de flotador tampoco tienen mucho sentido, pero al menos los flotadores tienen la ventaja de estar basados ​​en bloques.
BoltClock

70

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.


1
Mi práctica ha llegado a esto de que no hay ninguna razón para usar float nunca. Cada vez que lo usas, la mitad de las cosas se rompen. Solo lo usaría cuando necesito cosas para conjurar dentro de un div. El bloqueo en línea es increíble. El nuevo modelo de caja es impresionante. Entonces, no más hacks para alinearse verticalmente.
Muhammad Umer

50
inline-blockno es una mejora estricta sobre los flotantes debido al problema de espacio entre bloques , donde el espacio en blanco en el HTML se traduce en caracteres de espacio que separan los bloques. inline-blockrequiere soluciones propias , al igual que floatrequiere clearfix.
Rory O'Kane

41

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

1
Buena respuesta John! Lo que me pregunto es por qué clear hace que la divenvoltura sea los elementos flotantes. ¿Me pueden ayudar a visualizarlo?
Alexander Suraphel

@AlexanderSuraphel: esta respuesta lo explica en detalle -> stackoverflow.com/questions/12871710/…
John Slegers

16

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>


1
¿Puedes describir qué hace esto en relación con la pregunta?
1.21 gigavatios

Clearfix cambia a los niños flotantes que no influyen en el flujo principal mediante el uso de lo que son hacks inteligentes, flow-rootes la solución real.
mystrdat

11

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


5

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.


2

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.


1

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

0

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}

Te estás anulando aquí en al menos 3 instancias. .clearfix {...}, html[xmlns] .clearfix {...}, * html .clearfix {...}, Y .clearfix {...}todas seleccionar la misma cosa y sobrescribir el uno al otro. Esto es un poco hacky y no es realmente necesario.
ORyan

Esta es la versión anterior del método CSS clearfix, fue tomada de css-tricks.com/snippets/css/clear-fix que luego descubrí que el "." [Punto] era demasiado molesto y lo reemplazó con un espacio en blanco Por lo tanto \00A0, creo que fue por la compatibilidad entre navegadores y el conocimiento de la época.
Val
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.