Solución:
Dependiendo del diseño que se esté produciendo, cada una de las siguientes soluciones de CSS de clearfix tiene sus propios beneficios.
El clearfix tiene aplicaciones útiles, pero también se ha utilizado como truco. Antes de usar un clearfix, quizás estas modernas soluciones CSS pueden ser útiles:
- css flexbox
- cuadrícula css
Soluciones Clearfix modernas
Contenedor con overflow: auto;
La forma más sencilla de borrar elementos flotantes es usando el estilo overflow: auto en el elemento contenedor. Esta solución funciona en todos los navegadores modernos.
<div style="overflow: auto;">
<img
style="float: right;"
src="https://foroayuda.es/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 principal que contenga.
El uso de ‘overflow: hidden’ también es una solución de clearfix, pero no tendrá barras de desplazamiento, sin embargo, use hidden recortará cualquier contenido colocado fuera del elemento contenedor.
Nota: El elemento flotante es un img en este ejemplo, pero podría ser cualquier elemento html.
Clearfix recargado
Thierry Koblentz en CSSMojo escribió: El último clearfix recargado. Señaló que al eliminar el soporte para oldIE, la solución se puede simplificar a una declaración CSS. Además, usando display: block (en lugar de display: table) permite que los márgenes colapsen 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 más antiguas
Las siguientes soluciones no son necesarias para los navegadores modernos, pero pueden ser útiles para dirigirse a navegadores más antiguos.
Tenga en cuenta que estas soluciones se basan en 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”, una solución clara para los navegadores modernos
Thierry Koblentz ‘de CSS Mojo ha señalado que al apuntar a los navegadores modernos, ahora podemos eliminar el zoom y ::before propiedad / valores y simplemente use:
.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 advertencia: 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 que se derrumban “.
Micro Clearfix
La solución clearfix más reciente y adoptada a nivel mundial, 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
Este método básico es el preferido 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 utilizar el display propiedad 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 limpiar los flotadores usando el overflow propiedad es utilizar el truco de subrayado. IE aplicará los valores con el prefijo de subrayado, otros navegadores no lo harán. El zoom La propiedad activa 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 compensación 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 sobre Easy Clearing on Position Is Everything: http://www.positioniseverything.net/easyclearing.html
Elemento que usa la propiedad “clara”
La solución rápida y sucia (con algunos inconvenientes) para cuando estás juntando algo rápidamente:
<br style="clear: both" /> <!-- So dirty! -->
Inconvenientes
- No responde y, por lo tanto, es posible que no proporcione el efecto deseado si los estilos de diseño cambian según las consultas de los medios. Una solución en CSS puro es más ideal.
- Agrega marcado html sin agregar necesariamente ningún valor semántico.
- Requiere una definición y solución en línea 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 a él en el html.
- Hace que el código sea difícil de trabajar para otros, ya que es posible que tengan que escribir más trucos para solucionarlo.
- En el futuro, cuando necesite / desee utilizar otra solución clearfix, no tendrá que volver atrás y eliminar cada
<br style="clear: both" />etiqueta esparcida alrededor del marcado.
¿Qué problemas estamos tratando de resolver?
Hay dos consideraciones importantes a la hora de hacer flotar cosas:
-
Contiene flotadores descendientes. Esto significa que el elemento en cuestión se vuelve lo suficientemente alto para envolver a todos los descendientes flotantes. (No cuelgan afuera).
-
Aislar descendientes de flotadores exteriores. Esto significa que los descendientes dentro de un elemento deberían poder usar
clear: bothy que no interactúe con flotadores fuera del elemento.
Utiliza Nuestro Buscador
