¿Qué es un clearfix?
Recientemente estuve revisando el código de un sitio web y vi que cada uno <div> tenía una clase clearfix.
Después de una búsqueda rápida en Google, descubrí que a veces es para IE6, pero ¿qué es realmente una solución clara?
¿Podría proporcionar algunos ejemplos de un diseño con clearfix, en comparación con un diseño sin clearfix?
Si no necesita compatibilidad con IE9 o versiones anteriores, 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 desaconseja cada vez más con el uso de mejores alternativas.
display: inline-block- Mejor- Flexbox : mejor (pero compatibilidad limitada con el 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 de navegadores, consulte: https://caniuse.com/flexbox .
(Quizás una vez establecida completamente su posición, sea la forma absolutamente recomendada de disponer los elementos.)
Un clearfix es una forma de que un elemento borre automáticamente sus elementos secundarios , de modo que no sea necesario agregar marcas adicionales. Generalmente se usa en diseños flotantes donde los elementos flotan para apilarse horizontalmente.
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 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, sólo necesitas lo siguiente:
<div class="clearfix">
<div style="float: left;" class="clearfix">Sidebar</div>
<!-- No Clearing div! -->
</div>
Lea sobre esto en este artículo, de Chris Coyer @ CSS-Tricks
Las otras respuestas son correctas. Pero quiero agregar que es una reliquia de la época en la que la gente aprendía CSS por primera vez y abusaba de ellos floatpara hacer todos sus diseños. floatestá destinado a hacer cosas como imágenes flotantes junto a largas tiradas de texto, pero mucha gente lo utilizó como mecanismo de diseño principal. Como en realidad no fue diseñado para eso, necesitas trucos como "clearfix" para que funcione.
Hoy en día display: inline-blockes una alternativa sólida ( excepto 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.
Esto clearfixpermite que un contenedor envuelva a sus hijos flotantes. Sin un clearfixestilo o equivalente, un contenedor no envuelve a sus hijos flotantes y colapsa, como si sus hijos flotantes estuvieran en una posición absoluta.
Existen varias versiones del clearfix, con Nicolas Gallagher y Thierry Koblentz como autores clave.
Si desea compatibilidad con navegadores más antiguos, es mejor utilizar esta solución clara:
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
En SCSS, podría utilizar la siguiente técnica:
%clearfix {
&:before, &:after {
content:" ";
display:table;
}
&:after {
clear:both;
}
& {
*zoom:1;
}
}
#clearfixedelement {
@extend %clearfix;
}
Si no le interesa admitir navegadores antiguos, existe 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;
}
Consulta la disponibilidad para cualquier navegador aquí: http://caniuse.com/#feat=flow-root
El elemento (con una propiedad de visualización establecida en raíz de flujo) genera un cuadro contenedor de bloques y presenta su contenido utilizando un diseño de flujo. Siempre establece un nuevo contexto de formato de bloque para su contenido.
Lo que significa que si usa un div principal que contiene uno o varios hijos flotantes, esta propiedad garantizará que el padre incluya a todos sus hijos. Sin necesidad de un truco clearfix. En ningún hijo, ni siquiera en un último elemento ficticio (si estuviera usando la variante 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>
En pocas palabras, clearfix es un truco .
Es una de esas cosas feas con las que todos tenemos que vivir, ya que en realidad 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 demasiado común en el diseño/desarrollo web actual como para ignorar el valor del truco 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
