¿Qué métodos de 'clearfix' puedo utilizar?

Dependiendo del diseño que se esté produciendo, cada una de las siguientes soluciones CSS clearfix tiene sus propios beneficios.

El clearfix tiene aplicaciones útiles pero también se ha utilizado como truco. Antes de utilizar un clearfix, quizás estas soluciones CSS modernas puedan resultar útiles:

• caja flexible css
• cuadrícula css

Soluciones Clearfix modernas

Contenedor conoverflow: auto;

La forma más sencilla de borrar elementos flotantes es utilizar el estilo overflow: autodel 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 es que 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 lo contenga principal.

El uso de 'overflow: oculto' también es una solución clara, pero no tendrá barras de desplazamiento; sin embargo, su uso hiddenrecortará cualquier contenido ubicado fuera del elemento contenedor.

Nota: El elemento flotante es una imgetiqueta en este ejemplo, pero podría ser cualquier elemento html.

Clearfix recargado

Thierry Koblentz en CSSMojo escribió: Se recargó el último clearfix . Señaló que al eliminar el soporte para el antiguo IE, la solución se puede simplificar a una declaración CSS. Además, usar 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 resultar útiles para los navegadores más antiguos.

Tenga en cuenta que estas soluciones dependen de errores del navegador y, por lo tanto, deben usarse sólo si ninguna de las soluciones anteriores funciona para usted.

Están enumerados aproximadamente en orden cronológico.

"Beat That ClearFix", un clearfix para navegadores modernos

Thierry Koblentz de CSS Mojo ha señalado que cuando apuntamos a navegadores modernos, ahora podemos eliminar las zoompropiedades ::before/valores y 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 advertencia : si comienzas un nuevo proyecto desde cero, hazlo, pero no cambies esta técnica por la que tienes ahora, porque aunque no soportas el antiguo IE, tus 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 se prefiere 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, es decir, la configuración width: 100%en el contenedor.

.container {
  overflow: hidden;
  display: inline-block;
  display: block;
}

En lugar de usar la displaypropiedad para configurar "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 los flotantes usando la overflowpropiedad es usar el truco de guión bajo . IE aplicará los valores con el prefijo de guión bajo, otros navegadores no. La zoompropiedad activa hasLayout en IE:

.container {
  overflow: hidden;
  _overflow: visible; /* for IE */
  _zoom: 1; /* for IE */
}

Si bien esto funciona... no es ideal utilizar trucos.

PIE: Método de limpieza fácil

Este antiguo método de "limpieza fácil" tiene la ventaja de permitir que los elementos posicionados cuelguen fuera de los límites del contenedor, a expensas de un CSS más complicado.

Esta solución es bastante antigua, pero puede aprender todo sobre Easy Clearing en Position Is Everything: http://www.positioniseverything.net/easyclearing.html

Elemento que utiliza 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! -->

Desventajas

• 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 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 una solución en línea para cada instancia en lugar de una referencia de clase a una solución única de un "clearfix" en el CSS y referencias de clase en el HTML.
• Hace que a otros les resulte difícil trabajar con el código, ya que es posible que tengan que escribir más trucos para solucionarlo.
• En el futuro, cuando necesite o desee utilizar otra solución clearfix, no tendrá que volver atrás y eliminar todas las <br style="clear: both" />etiquetas que se encuentran alrededor del marcado.

Oct 27 '2009 19:10 Beau Smith