¿Qué hace la clase clearfix en css?

Question

He visto div etiquetas usan una clase clearfix cuando es niño divs usa la propiedad float. La clase clearfix se ve así:

.clearfix:after { 
    clear: both; 
    content: "."; 
    display: block; 
    height: 0; 
    visibility: hidden; 
} 
.clearfix { 
    display: inline-block; 
} 
.clearfix { 
    display: block; 
} 

He descubierto que si yo no uso clearfix cuando se utiliza la propiedad bottom-border, la frontera mostraría encima del niño divs. ¿Alguien puede explicar lo que hace la clase clearfix? Además, ¿por qué hay dos propiedades display? Eso me parece muy extraño. Tengo especial curiosidad sobre lo que significa el content:'.'.

Gracias, G

Answer 1

Cómo funcionan los flotadores

Cuando existen elementos flotantes en la página, los elementos que no son flotantes envoltura alrededor los elementos flotantes, de forma similar a cómo el texto pasa alrededor de una imagen en un periódico. Desde la perspectiva del documento (el propósito original de HTML), así es como funcionan las carrozas.

float vs display:inline

Antes de la invención de display:inline-block, sitios web utilizan float para establecer elementos uno junto al otro. float es preferible a display:inline ya que con este último, no puede establecer las dimensiones del elemento (ancho y alto) así como los acolchados verticales (superior e inferior), que pueden hacer los elementos flotados ya que se tratan como elementos de bloque.

problemas flotador

El problema principal es que estamos utilizando float en contra de su propósito previsto.

Otro es que mientras que float permite elementos de nivel de bloque uno al lado del otro, los flotadores no dan forma a su contenedor. Es como position:absolute, donde el elemento está "fuera del diseño". Por ejemplo, cuando un contenedor vacío contiene 100px x 100px flotante <div>, el <div> no impartirá 100px de altura al contenedor.

A diferencia de position:absolute, afecta el contenido que lo rodea. El contenido después del elemento flotante se "ajustará" alrededor del elemento. Empieza representando al lado y luego debajo, como el texto del periódico que fluiría alrededor de una imagen.

Clearfix al rescate

Lo clearfix hace es forzar el contenido después de los flotadores o el recipiente que contiene los flotadores para rendir por debajo de ella. Hay muchas versiones para corregir, pero tiene su nombre en la versión que se usa comúnmente, la que usa la propiedad CSS clear.

Ejemplos

Here are several ways to do clearfix, según el caso navegador y uso. Solo se necesita saber cómo usar la propiedad clear en CSS y cómo se renderizan los flotantes en cada navegador para lograr una solución perfecta para todos los navegadores.

Lo que tienes

Su estilo se proporciona una forma de clearfix con compatibilidad hacia atrás. I found an article acerca de este clearfix. Resulta que es un clearfix ANTIGUO, que sigue atendiendo a los navegadores antiguos. Hay una versión más nueva y más limpia en el artículo también. Aquí está el desglose:

• La primera clearfix tiene anexa una pseudo-elemento invisible, que se labró clear:both, entre el elemento de destino y el siguiente elemento. Esto fuerza al pseudo-elemento a renderizarse debajo del objetivo, y al siguiente elemento debajo del pseudo-elemento.

• El segundo aà ± ade el estilo display:inline-block que no es compatible con navegadores anteriores. inline-block es como en línea, pero le ofrece algunas propiedades que bloquean elementos como el ancho, la altura y el relleno vertical. Este fue el objetivo de IE-MAC.

• Esta fue la reaplicación de display:block debido a la regla IE-MAC anterior. Esta regla estaba "oculta" de IE-MAC.

Con todo, estas 3 reglas mantener el .clearfix de trabajo multi-navegador, con navegadores antiguos en mente.

Answer 2

Cuando un elemento, tal como un div es floated, su contenedor principal ya no considera su altura, es decir

<div id="main"> 
    <div id="child" style="float:left;height:40px;"> Hi</div> 
</div> 

El contenedor padre no será ser de 40 píxeles de alto por defecto. Esto causa muchos pequeños caprichos extraños si está utilizando estos contenedores para estructurar el diseño.

Por lo tanto, la clase clearfix que usan varios frameworks soluciona este problema al hacer que el contenedor primario "reconozca" los elementos contenidos.

Día a día, normalmente solo uso frameworks como 960gs, Twitter Bootstrap para diseñar y no molestarme con la mecánica exacta.

puede leer más aquí

http://www.webtoolkit.info/css-clearfix.html

Answer 3

clearfix es lo mismo que overflow:hidden. Ambos hijos flotan claramente de la matriz, pero clearfix no cortará el elemento que se desborda a parent. También funciona en IE8 & arriba.

No es necesario definir "." en el contenido & .clearfix.Sólo tiene que escribir así:

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

HTML

<div class="parent clr"></div> 

Lea estos enlaces para obtener más

http://css-tricks.com/snippets/css/clear-fix/,

What methods of ‘clearfix’ can I use?