Dependiendo del diseño que se esté produciendo, cada una de las siguientes soluciones de clearfix CSS tiene sus propios beneficios.
El clearfix tiene aplicaciones útiles, pero también se ha utilizado como hack. Antes de usar una solución clara, quizás estas soluciones css modernas puedan ser útiles:
Soluciones modernas de Clearfix
Contenedor con overflow: auto;
La forma más sencilla de borrar elementos flotantes es usar el estilo overflow: autoen el elemento contenedor. Esta solución funciona en todos los navegadores modernos.
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
Una desventaja, el uso de ciertas combinaciones de margen y relleno en el elemento externo puede hacer que aparezcan barras de desplazamiento, pero esto se puede resolver colocando el margen y el relleno en otro elemento que contiene el elemento principal.
El uso de 'overflow: hidden' también es una solución clara, pero no tendrá barras de desplazamiento, sin embargo, el uso hiddenrecortará cualquier contenido colocado fuera del elemento contenedor.
Nota: El elemento flotante es una imgetiqueta en este ejemplo, pero podría ser cualquier elemento html.
Clearfix Reloaded
Thierry Koblentz en CSSMojo escribió: El último clearfix recargado . Señaló que al abandonar el soporte para oldIE, la solución se puede simplificar a una declaración css. Además, el uso display: block(en lugar de display: table) permite que los márgenes se contraigan correctamente cuando los elementos con clearfix son hermanos.
.container::after {
content: "";
display: block;
clear: both;
}
Esta es la versión más moderna de clearfix.
⋮
⋮
Soluciones Clearfix anteriores
Las siguientes soluciones no son necesarias para los navegadores modernos, pero pueden ser útiles para apuntar a navegadores más antiguos.
Tenga en cuenta que estas soluciones dependen de errores del navegador y, por lo tanto, solo deben usarse si ninguna de las soluciones anteriores funciona para usted.
Se enumeran aproximadamente en orden cronológico.
"Beat That ClearFix", un clearfix para navegadores modernos
Thierry Koblentz 'de CSS Mojo ha señalado que al apuntar a los navegadores modernos, ahora podemos soltar los zoomy ::before/ propiedad / valores y simplemente usar:
.container::after {
content: "";
display: table;
clear: both;
}
Esta solución no es compatible con IE 6/7 ... ¡a propósito!
Thierry también ofrece: " Una palabra de precaución : si comienza un nuevo proyecto desde cero, hágalo, pero no cambie esta técnica por la que tiene ahora, porque aunque no es compatible con oldIE, sus reglas existentes impiden márgenes de colapso ".
Micro Clearfix
La solución clearfix más reciente y adoptada a nivel mundial, la Micro Clearfix de Nicolas Gallagher .
Soporte conocido: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
Propiedad de desbordamiento
Se prefiere este método básico para el caso habitual, cuando el contenido posicionado no se mostrará fuera de los límites del contenedor.
http://www.quirksmode.org/css/clearing.html
: explica cómo resolver problemas comunes relacionados con esta técnica, a saber, la configuración width: 100%en el contenedor.
.container {
overflow: hidden;
display: inline-block;
display: block;
}
En lugar de usar la displaypropiedad para establecer "hasLayout" para IE, se pueden usar otras propiedades para activar "hasLayout" para un elemento .
.container {
overflow: hidden;
zoom: 1;
display: block;
}
Otra forma de borrar flotantes usando la overflowpropiedad es usar el hack de subrayado . IE aplicará los valores prefijados con el guión bajo, otros navegadores no lo harán. La zoompropiedad desencadena hasLayout en IE:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
Si bien esto funciona ... no es ideal usar hacks.
PIE: Método de limpieza fácil
Este antiguo método "Easy Clearing" tiene la ventaja de permitir que los elementos posicionados cuelguen fuera de los límites del contenedor, a expensas de CSS más complicado.
Esta solución es bastante antigua, pero puede aprender todo acerca de Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html
Elemento que usa la propiedad "clear"
La solución rápida y sucia (con algunos inconvenientes) para cuando estás abofeteando algo rápidamente:
<br style="clear: both" /> <!-- So dirty! -->
Inconvenientes
- No responde y, por lo tanto, puede no proporcionar el efecto deseado si los estilos de diseño cambian en función de las consultas de los medios. Una solución en CSS puro es más ideal.
- Agrega marcado html sin necesariamente agregar ningún valor semántico.
- Requiere una definición en línea y una solución para cada instancia en lugar de una referencia de clase a una única solución de un "clearfix" en el css y referencias de clase en el html.
- Hace que el código sea difícil de trabajar para otros, ya que pueden tener que escribir más hacks para solucionarlo.
- En el futuro, cuando necesite / desee usar otra solución clearfix, no tendrá que regresar y quitar todas las
<br style="clear: both" />etiquetas que se encuentran alrededor del marcado.
