html - que - ¿Qué es un clearfix?
clearfix w3schools (11)
Si no necesita ser compatible con 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 está desanimando cada vez más con el uso de mejores alternativas.
-
display: inline-block- Mejor - Flexbox - Mejor (pero con soporte limitado para 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 del navegador, visite: http://caniuse.com/flexbox .
(Quizás una vez que se establezca completamente su posición, puede ser la manera 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 marcas adicionales. Generalmente se usa en diseños flotantes donde los elementos se 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 requiere el soporte de IE <8, lo siguiente también está bien:
.clearfix:after {
content: "";
display: table;
clear: both;
}
Normalmente necesitarías hacer algo como sigue:
<div>
<div style="float: left;">Sidebar</div>
<div style="clear: both;"></div> <!-- Clear the float -->
</div>
Con clearfix, solo 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 - por Chris Coyer @ CSS-Tricks
Recientemente estuve revisando el código de algún sitio web, y vi que cada <div> tenía una clearfix clase.
Después de una búsqueda rápida en Google, aprendí que es para IE6 a veces, pero ¿qué es realmente un clearfix?
¿Podría proporcionar algunos ejemplos de un diseño con un clearfix, en comparación con un diseño sin un clearfix?
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 /00A0 ==
Más sobre esto 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í está una versión compacta de ella ...
.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}
Clearfix se utiliza para borrar los flotadores adicionales. Es una clase agregada en el elemento padre.
Mi código de Clearfix 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 iniciales de ese elemento. Mientras que clear:both no permitirán otros elementos flotantes en los lados derecho o izquierdo de ese elemento especificado que contiene esa clase.
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 flotantes y se colapsa, como si sus niños flotantes estuvieran colocados absolutamente.
Hay varias versiones de Clearfix, con Nicolas Gallagher y Thierry Koblentz como autores clave.
Si desea soporte para navegadores más antiguos, es mejor usar este clearfix:
.clearfix:before, .clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
En SCSS, debe utilizar la siguiente técnica:
%clearfix {
&:before, &:after {
content:" ";
display:table;
}
&:after {
clear:both;
}
& {
*zoom:1;
}
}
#clearfixedelement {
@extend %clearfix;
}
Si no te importa admitir navegadores antiguos, hay una versión más corta:
.clearfix:after {
content:"";
display:table;
clear:both;
}
En pocas palabras, clearfix es un hack .
Es una de esas cosas feas con las que todos tenemos que convivir, ya que realmente es la única forma razonable de garantizar que los elementos secundarios flotantes no desborden a sus padres. Hay otros esquemas de diseño por ahí, pero flotar es demasiado común en el diseño / desarrollo web hoy en día para ignorar el valor del hack de 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) */
}
reference
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 utilizar en casos en los que nunca desea que el contenido se desborde.
Las otras respuestas son correctas. Pero quiero agregar que es una reliquia de la época en que las personas aprendían por primera vez CSS y abusaban de float para hacer todo su diseño. float está diseñado para hacer cosas como imágenes flotantes junto a largas secuencias de texto, pero muchas personas lo utilizaron como su mecanismo de diseño principal. Ya que no fue realmente para eso, necesitas trucos como "clearfix" para que funcione.
Estos días se 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, diseño de cuadrícula, etc.
Probé la respuesta aceptada pero todavía tenía un problema con la alineación del contenido. Agregar un selector ": antes" 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án en CSS a continuación:
clearfix:after,
clearfix:before {
content: " ";
/* Older browser do not support empty content */
visibility: hidden;
display: block;
height: 0;
clear: both;
}
Si aprende visualizando, esta imagen puede ayudarlo a comprender lo que hace Clearfix .
Una técnica comúnmente utilizada en los diseños basados en flotación CSS es la asignación de 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 , (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 :after del 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.
Para 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;
}
Compruebe la disponibilidad de 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 de 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 se asegurará de que el padre incluya todos sus hijos. Sin necesidad de un hack de clearfix. En cualquier elemento secundario, ni siquiera un último elemento ficticio (si estaba utilizando la variante de clearfix con: antes 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>