html - both - ¿Qué hace la clase clearfix en css?
clearfix w3schools (3)
Esta pregunta ya tiene una respuesta aquí:
- ¿Qué es un clearfix? 10 respuestas
He visto las etiquetas div usar una clase de clearfix cuando los elementos secundarios para niños usan la propiedad float . La clase de clearfix se ve así:
.clearfix:after {
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
.clearfix {
display: inline-block;
}
.clearfix {
display: block;
}
Descubrí que si no uso clearfix cuando uso la propiedad de bottom-border , el borde se mostraría arriba de los divs secundarios. ¿Alguien puede explicar lo que hace la clase clearfix? Además, ¿por qué hay dos propiedades de display ? Eso me parece muy extraño. Tengo especial curiosidad sobre cuál es el content:''.'' medio.
Gracias, G
Cómo funcionan las carrozas
Cuando existen elementos flotantes en la página, los elementos no flotantes se envuelven alrededor de los elementos flotantes, de forma similar a cómo el texto va alrededor de una imagen en un periódico. Desde la perspectiva de un documento (el propósito original de HTML), así es como funcionan las carrozas.
float vs display:inline
Antes de la invención de la display:inline-block , los sitios web usan float para establecer elementos uno al lado del otro. float es preferible a la display:inline ya que con este último, no puede establecer las dimensiones del elemento (ancho y alto), así como los rellenos verticales (superior e inferior), que pueden hacer los elementos flotados, ya que se tratan como elementos de bloque.
Problemas de flotación
El principal problema es que estamos usando float contra su propósito previsto.
Otra es que, aunque el float permite elementos de nivel de bloque uno al lado del otro, los flotadores no imparten forma a su contenedor . Es como position:absolute , donde el elemento "se saca del diseño". Por ejemplo, cuando un contenedor vacío contiene un 100px x 100px <div> flotante, el <div> no impartirá 100px de altura al contenedor.
A diferencia de la position:absolute , afecta el contenido que la 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 que clearfix hace es forzar el contenido después de que los flotadores o el contenedor que contiene los flotadores se rendericen debajo de él. Hay muchas versiones para corregir, pero tiene su nombre de la versión que se usa comúnmente: la que usa la propiedad CSS clear .
Ejemplos
Aquí hay varias formas de hacer clearfix , dependiendo del navegador y el caso de 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.
Que tienes
Su estilo proporcionado es una forma de clearfix con compatibilidad hacia atrás. Encontré un artículo sobre 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:
El primer clearfix tiene un pseudo-elemento invisible, que tiene un estilo
clear:both, entre el elemento objetivo y el siguiente elemento. Esto fuerza al pseudo-elemento a renderizarse debajo del objetivo, y al siguiente elemento debajo del pseudo-elemento.El segundo agrega la
display:inline-blockestilodisplay:inline-blockque 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 la
display:blockdebido a la regla IE-MAC anterior. Esta regla estaba "oculta" de IE-MAC.
En general, estas 3 reglas mantienen el .clearfix trabajando en todos los navegadores, teniendo en cuenta los navegadores antiguos.
Cuando un elemento, como un div se floated , su contenedor padre ya no considera su altura, es decir,
<div id="main">
<div id="child" style="float:left;height:40px;"> Hi</div>
</div>
El contenedor principal no tendrá 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.
Entonces, la clase clearfix que usan varios frameworks soluciona este problema al hacer que el contenedor principal "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í
clearfix es lo mismo que overflow:hidden . Ambos hijos flotan claramente del padre, pero clearfix no cortará el elemento que se desborda a su parent . También funciona en IE8 y superior.
No hay necesidad de definir "." en contenido y .clearfix. Simplemente escribe así:
.clr:after {
clear: both;
content: "";
display: block;
}
HTML
<div class="parent clr"></div>
Lee estos enlaces para más