que - html clearfix class
¿Clearfix está en desuso? (8)
Usted es consciente del problema ancestral: los contenedores que contienen elementos flotantes no expanden automáticamente su altura para encerrar a sus hijos.
Un enfoque para solucionar esto es el "clearfix" que agrega varias reglas de CSS para garantizar que un contenedor se extienda correctamente.
Sin embargo, solo dar el contenedor overflow: hidden parece funcionar igual de bien, y con la misma cantidad de compatibilidad de navegador.
Según esta guía , ambos métodos son compatibles en todos los navegadores que son importantes hoy en día.
¿Esto significa que "clearfix" está en desuso? ¿Hay alguna ventaja en usarlo por overflow: hidden ?
Aquí hay una pregunta muy similar: ¿cuál es la diferencia entre el hack y el desbordamiento de clearfix: oculto vs desbordamiento: automático? pero la pregunta realmente no se responde allí.
Como se menciona en otra respuesta, la desventaja de lo hidden es que, sorprendentemente, esconderá cosas como menús desplegables. Sin embargo, hay otra forma de contener con una línea, flotando el contenedor principal. En general, esto funciona cuando el overflow: hidden tiene una desventaja, y también la flotación ayuda con muchos problemas heredados de IE, nuevamente especialmente en las listas. Si puede usar un ancho, entonces usaría un "flotador en un flotador", o display: inline-block .
No digo que el "clearfix" no sirva, pero para mí está demasiado arraigado en los temas de CMS (como Wordpress y Drupal) que creo que en muchos casos se usa demasiado y en divs que en realidad no necesitan para ser limpiado o contenido.
No puedo pensar en una situación en la que no pueda usar desbordamiento o flotación, en clearfix, pero mi cerebro está en modo vacaciones, pero como es, clearfix, es una solución de copiar / pegar que a veces es lo más fácil de recomendar, sin embargo, tiene que ser el que establece hasLayout para IE, que por supuesto tanto overflow como float también lo hacen ahora.
agregó que esto acaba de volver a aparecer: y el cerebro no está en modo de vacaciones ...
Realmente estoy empezando a pensar que sí, que el clearfix no es necesario (al menos todavía no he encontrado un ejemplo). Incluso el ejemplo anterior de @ thirtydot se puede trabajar con display: inline-block y aún tiene soporte para IE6, el el contenedor que tiene un ancho fijo tiene el IE7 y el requisito belowLayout, y al convertirlo en un bloque en línea para todos los demás navegadores puede centrarse y los elementos adhesivos "offset" funcionarán bien mientras el contenedor se estire verticalmente
Example
También he visto referencias a un nuevo y mejorado clearfix para esos márgenes que se colapsan usando :before así como también :after en el clearfix hack, pero a menos que me falta algo, el demo está defectuoso - hay espacios en blanco desiguales en los pre elementos y las casillas "clearfixed" en realidad no contienen floats, tan pronto como se flotan los elementos en ellas, cada método realiza lo mismo.
Los márgenes de nota en pre elementos no reaccionan igual que otros de todos modos (así que pruébelo con relleno en lugar de margen para ver la misma imagen mientras prueba) ... y también hay otro IE "foible" por el cual IE no contiene márgenes adecuadamente si no están explícitamente especificados y en la demostración hay márgenes explícitos en la h2 pero no en la p por lo que todos los elementos son iguales, un elemento claro como lo demostró TJK en esa página está forzando artificialmente la contención de los márgenes en una normal elemento de bloque, de la misma manera que el relleno de 1px superior / inferior, ¡porque los navegadores hacen esto diferente de todos modos!
Si lo hace, entonces flote los elementos dentro de esos contenedores (el punto de limpieza de todos modos) - los márgenes entonces contienen lo que probablemente le gustaría, como lo harían si dentro de un nuevo Contexto de Formato de Bloque - sin ningún extra :before parte al hack, todas las variaciones de clearfix funcionan igual de bien!
Así que, en mi opinión, ya no hay necesidad de esta forma de "corrección", simplemente busque la mejor manera de crear ese nuevo Contexto de Formato de Bloque, usando haslayout para IE más antiguos ... ¡las propiedades para ambos son las mismas!
como señala TJK en su artículo: http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified/
Mejores alternativas
Si puede aplicar un ancho al elemento que contiene flotadores, entonces su mejor opción es usar:
display: inline-block;width: <any explicit value>;
Creo que es justo e incluso con 100% de elementos que pueden necesitar relleno, puedes hacerlo junto con box-sizing
.clearfix {
display: inline-block;
width: 100%;
*width: auto;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
He estado recomendando el overflow: hidden método overflow: hidden durante muchos años. Es ampliamente compatible.
No diría que la eliminación clara está en desuso. Sin embargo, diría que la mayoría de las versiones del clearfix que se usan actualmente están desactualizadas.
Según los expertos , esta es la versión que deberías usar hoy:
.clearfix:after {
content: "";
display: table;
clear: both;
}
Puedes usar overflow: hidden todo el tiempo.
Pero, hay excepciones. Aquí hay un ejemplo de uno:
Desbordamiento de un contenedor div horizontal pero no verticalmente
La pregunta allí fue:
- Hay una altura fija en esto: http://jsfiddle.net/je8aS/2/
- Sin la altura fija: http://jsfiddle.net/thirtydot/je8aS/5/
- ¿Cómo limpiar los flotadores sin usar una altura fija?
-
overflow: hiddenno funciona: http://jsfiddle.net/thirtydot/je8aS/6/ - Tienes que usar algún otro método para limpiar flotadores, como
clear: both:
http://jsfiddle.net/je8aS/3/ - La clase clearfix también funciona: http://jsfiddle.net/thirtydot/je8aS/11/
Aquí hay un ejemplo más importante de cuando no puede usar el overflow: hidden :
http://fordinteractive.com/misc/overflow/
Eso no quiere decir que clearfix sea la única alternativa: display: inline-block arregla limpiamente ese ejemplo:
Recientemente descubrí para mi agradable sorpresa ese overflow:hidden funciona perfectamente hoy en día. Había estado usando el método clearfix hasta hace unos 6 meses y es bastante hinchado en comparación.
Sí, está "en desuso" por CSS Display L3 :
Creó los tipos de visualización interna de
flow-rootpara expresar mejor los tipos de visualización del diseño de flujo y para crear un cambio explícito para convertir un elemento en una raíz de BFC . (Esto debería eliminar la necesidad de hacks como::after { clear: both; }yoverflow: hiddenque están destinados a lograr este propósito).
Entonces, la forma correcta es
display: flow-root;
Lamentablemente es una adición reciente, por lo que los navegadores aún no lo han implementado.
Nota: asegúrese de tener el DOCTYPE correcto configurado si solo está probando. Me sorprendió un par de veces y siempre me olvido!
En IE9, por ejemplo, lo siguiente simplemente no funcionará sin <!DOCTYPE html> en la parte superior.
<!DOCTYPE html>
<html>
<style>
#bottom_panel {
overflow: hidden;
background: orange;
border:1px solid red;
}
#bottom_panel .col1 {
background: red;
float: left;
width: 100px
}
#bottom_panel .col2 {
background: yellow;
float: left;
width: 70px
}
#bottom_panel .col3 {
background: green;
float: left;
width: 150px
}
.clear {
clear: both;
}
</style>
<div id="bottom_panel">
<div class="col1">this is col 1</div>
<div class="col2">this is col 2. It''s taller than the other columns because it''s got more text in ot</div>
<div class="col3">this is col 3</div>
</div>
<div>
This should not be floating around! Should be underneath the columns!
</div>
</html>
overflow:hidden es muy "poderoso" (lo he usado durante varios años, y estoy de acuerdo con lo que dijo David) pero al mismo tiempo se expone a un problema. Si, por ejemplo, dentro del contenedor tiene algunos elementos abs que tiene que arrastrar y soltar fuera de él, no podrá verlos fuera del contenedor. En este caso particular, necesitas usar ese truco ''clearfix'';)