Pregunta ¿Qué métodos de 'clearfix' puedo usar?


Tengo el viejo problema de un div envolviendo un diseño de dos columnas. Mi barra lateral está flotando, entonces mi contenedor div no puede envolver el contenido y la barra lateral.

<div id="container">
  <div id="content"></div>
  <div id="sidebar"></div>
</div>

Parece haber numerosos métodos para corregir el error claro en Firefox:

  • <br clear="all"/>
  • overflow:auto
  • overflow:hidden

En mi situación, el único que parece funcionar correctamente es el <br clear="all"/> solución, que es un poco desaliñado. overflow:auto me da desagradables barras de desplazamiento, y overflow:hidden seguramente debe tener efectos secundarios. Además, IE7 aparentemente no debería sufrir este problema debido a su comportamiento incorrecto, pero en mi situación está sufriendo lo mismo que Firefox.

¿Qué método actualmente disponible para nosotros es el más robusto?


809
2017-10-17 08:15


origen


Respuestas:


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

El clearfix tiene aplicaciones útiles, pero también se ha usado como un hack. Antes de utilizar un clearfix quizás estas soluciones css modernas pueden ser útiles:


Soluciones modernas de Clearfix


Contenedor con overflow: auto;

La forma más sencilla de eliminar elementos flotados es utilizando el estilo overflow: auto en el elemento que contiene 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 contenga elementos principales.

El uso de 'overflow: hidden' también es una solución de clearfix, pero no tendrá barras de desplazamiento, sin embargo, usa hidden recortará cualquier contenido posicionado fuera del elemento contenedor.

Nota: El elemento flotante es un img etiqueta 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 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 adecuadamente cuando los elementos con clearfix son hermanos.

.container::after {
  content: "";
  display: block;
  clear: both;
}

Esta es la versión más moderna del clearfix.


Soluciones anteriores de Clearfix

Las siguientes soluciones no son necesarias para navegadores modernos, pero pueden ser útiles para orientarse a navegadores más antiguos.

Tenga en cuenta que estas soluciones se basan en errores del navegador y, por lo tanto, deben utilizarse solo si ninguna de las soluciones anteriores funciona para usted.

Se enumeran aproximadamente en orden cronológico.


"Beat That ClearFix", una solución para navegadores modernos

Thierry Koblentz 'de CSS Mojo ha señalado que cuando se dirigen a navegadores modernos, ahora podemos descartar 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 palabra de precaución: si comienzas un nuevo proyecto desde el principio, hazlo, pero no cambies esta técnica por la que tienes ahora, porque a pesar de que no es compatible con oldIE, las reglas existentes previenen el colapso de los márgenes ".


Micro Clearfix

La solución de clearfix más reciente y adoptada a nivel mundial, la Micro Clearfix por 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 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, es decir, establecer width: 100% en el contenedor.

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

En lugar de usar el display propiedad para establecer "hasLayout" para IE, otras propiedades se pueden utilizar para activando "hasLayout" para un elemento.

.container {
  overflow: hidden;
  zoom: 1;
  display: block;
}

Otra forma de limpiar flotadores usando el overflow propiedad es usar el subrayar hackear. IE aplicará los valores prefijados con el guión bajo, otros navegadores no lo harán. los zoom factores desencadenantes 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 método anterior de "limpieza fácil" 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 la compensación fácil en la posición lo es todo: 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 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 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 solución única de un "clearfix" en el CSS y referencias de clase en el html.
  • Hace que sea difícil trabajar con código para otros, ya que pueden tener que escribir más hacks para evitarlo.
  • En el futuro, cuando necesite / desee utilizar otra solución de clearfix, no tendrá que volver atrás y eliminar cada <br style="clear: both" /> etiqueta esparcida alrededor del marcado.

1006
2017-10-27 19:37



¿Qué problemas estamos tratando de resolver?

Hay dos consideraciones importantes cuando flotas cosas:

  1. Que contiene flotadores descendientes. Esto significa que el elemento en cuestión se hace lo suficientemente alto como para envolver a todos los descendientes flotantes. (No cuelgan afuera)

    Floating content hanging outside its container

  2. Los descendientes aislantes de flotadores externos. Esto significa que los descendientes dentro de un elemento deberían poder usar clear: both y no interactuar con flotadores fuera del elemento.

    <code>clear: both</code> interacting with a float elsewhere in the DOM

Bloquear contextos de formateo

Solo hay una forma de hacer ambas cosas. Y eso es establecer un nuevo contexto de formato de bloque. Los elementos que establecen un contexto de formato de bloque son un rectángulo aislado en el que los flotantes interactúan entre sí. Un contexto de formato de bloque siempre será lo suficientemente alto como para envolver visualmente sus descendientes flotantes, y no flotantes fuera de un contexto de formato de bloque pueden interactuar con elementos dentro. Este aislamiento bidireccional es exactamente lo que quieres. En IE, este mismo concepto se llama hasLayout, que se puede configurar a través de zoom: 1.

Hay varias formas de establecer un contexto de formato de bloque, pero la solución que recomiendo es display: inline-block con width: 100%. (Por supuesto, están los advertencias habituales con el uso width: 100%, entonces usa box-sizing: border-box o poner padding, marginy border en un elemento diferente)

La solución más robusta

Probablemente la aplicación más común de flotadores es el diseño de dos columnas. (Se puede extender a tres columnas)

Primero, la estructura de marcado.

<div class="container">
  <div class="sidebar">
    sidebar<br/>sidebar<br/>sidebar
  </div>
  <div class="main">
    <div class="main-content">
      main content
      <span style="clear: both">
        main content that uses <code>clear: both</code>
      </span>
    </div>
  </div>
</div>

Y ahora el CSS.

/* Should contain all floated and non-floated content, so it needs to
 * establish a new block formatting context without using overflow: hidden.
 */
.container {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

/* Fixed-width floated sidebar. */
.sidebar {
  float: left;
  width: 160px;
}

/* Needs to make space for the sidebar. */
.main {
  margin-left: 160px;
}

/* Establishes a new block formatting context to insulate descendants from
 * the floating sidebar. */
.main-content {
  display: inline-block;
  width: 100%;
  zoom: 1; /* new block formatting context via hasLayout for IE 6/7 */
}

Inténtalo tú mismo

Ir JS Bin para jugar con el código y ver cómo esta solución se construye desde cero.

Los métodos tradicionales de clearfix considerados nocivos

El problema con el tradicional clearfix  soluciones es que usan dos conceptos de representación diferentes para lograr el mismo objetivo para IE y todos los demás. En IE usan hasLayout para establecer un nuevo contexto de formato de bloque, pero para todos los demás utilizan cuadros generados (:after) con clear: both, que no establece un nuevo contexto de formato de bloque. Esto significa que las cosas no se comportarán igual en todas las situaciones. Para una explicación de por qué esto es malo, vea Todo lo que sabes sobre Clearfix es incorrecto.


67
2018-03-29 19:54



El nuevo estándar, según lo utilizado por Inuit.css y Borbón - dos marcos CSS / Sass ampliamente utilizados y bien mantenidos:

.btcf:after {
    content:"";
    display:block;
    clear:both;
}

Notas

Tenga en cuenta que los clearfixes son esencialmente un truco de lo que los diseños de flexbox ahora pueden proporcionar en un mucho más inteligente. Los elementos flotantes de CSS se diseñaron originalmente para que el contenido en línea fluyera alrededor, como las imágenes en un artículo de texto largo, y no para diseños de cuadrícula y similares. Si tu navegadores de destino compatibles con flexbox, vale la pena investigar.

Esto no es compatible con IE7. Tú no debería estar apoyando IE7. Hacer esto continúa exponer a los usuarios a vulnerabilidades de seguridad no fijadas y hace la vida más difícil para todos los demás desarrolladores web, ya que reduce la presión sobre los usuarios y las organizaciones para que cambien a navegadores modernos.

Este clearfix era anunciado y explicado por Thierry Koblentz en julio de 2012. Derrama peso innecesario de El micro-claro de Nicolas Gallagher en 2011. En el proceso, libera un pseudo-elemento para su propio uso. Esto ha sido actualizado para usar display: block más bien que display: table (nuevamente, crédito a Thierry Koblentz).


53
2018-04-19 07:28



Recomiendo usar lo siguiente, que está tomado de http://html5boilerplate.com/

/* >> The Magnificent CLEARFIX << */
.clearfix:after { 
  content: "."; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden; 
}
.clearfix { 
  display: inline-block;  
}
* html .clearfix {  
  height: 1%;  
} /* Hides from IE-mac \*/
.clearfix {  
  display: block;  
}

27
2017-09-27 15:16



La propiedad de desbordamiento se puede usar para borrar flotantes sin márgenes adicionales:

.container { overflow: hidden; }

Esto funciona para todos los navegadores excepto IE6, donde todo lo que necesitas hacer es habilitar hasLayout (el zoom es mi método preferido):

.container { zoom: 1; }

http://www.quirksmode.org/css/clearing.html


23
2018-02-10 11:20



He encontrado un error en el método oficial CLEARFIX: El DOT no tiene un tamaño de fuente. Y si configuras el height = 0 y el primer Elemento en tu DOM-Tree tiene la clase "clearfix" siempre tendrás un margen en la parte inferior de la página de 12px :)

Tienes que arreglarlo así:

/* float clearing for everyone else */
.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
  font-size: 0;
}

Ahora es parte de YAML-Layout ... Solo échale un vistazo, ¡es muy interesante! http://www.yaml.de/en/home.html


17
2018-01-20 15:50



Esta es una solución bastante ordenada:

/* For modern browsers */
.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}

Se sabe que funciona en Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+

Incluyendo el selector: before no es necesario para limpiar los flotadores,   pero evita que los márgenes superiores colapsen en los navegadores modernos. Esta   asegura que haya coherencia visual con IE 6/7 cuando zoom: 1 es   aplicado.

De http://nicolasgallagher.com/micro-clearfix-hack/


15
2018-04-21 14:46



Clearfix de bootstrap:

.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

10
2017-12-05 07:12