El uso de la propiedad Clearfix puede ajustar automáticamente el elemento principal de acuerdo con el elemento secundario y solucionar los problemas en un código HTML a través de algunos atributos como ' Desbordamiento ” que controla las dimensiones de los elementos principal y secundario sin necesidad de marcas adicionales.
Uso de la propiedad Clearfix
Entendamos el uso de una propiedad clearfix para saber qué le hace a la salida agregando una propiedad clearfix de CSS en un fragmento de código HTML:
Sin propiedad Clearfix
Ejecutemos un fragmento de código sin ejecutar la propiedad clearfix para comprender el tipo de problemas que clearfix puede resolver:
Cree una clase en HTML que inserte una imagen en un contenedor div:
< división clase = 'arreglar' >
< hermano >< imagen clase = 'img' origen = 'imagen.png' todo = 'imagen' ancho = '250' altura = '180' >
Texto...
< / división >
El siguiente es el código CSS para el HTML anterior:
.clearfix {
borde : 3 píxeles sólido #2baa12 ;
relleno : 5px ;
}
.img {
flotar : izquierda ;
}
Esto generará la salida de tal manera que la clase secundaria que contiene la imagen se desbordará fuera del contenedor. En situaciones como esta, la propiedad clear fix se puede usar para borrar o solucionar este problema fácilmente:
Con propiedad Clearfix
Para solucionar el problema, simplemente podemos agregar un Desbordamiento atributo con el valor igual a auto eso ajustará el contenedor principal de acuerdo con el tamaño del elemento secundario:
.clearfix {
borde : 3 píxeles sólido #2baa12 ;
relleno : 5px ;
}
.clearfix {
Desbordamiento : auto ;
}
.img {
flotar : izquierda ;
}
Aquí, en este fragmento de código, la clase principal es el contenedor y la imagen se inserta en su clase secundaria:
< división clase = 'arreglar' >< hermano >< imagen clase = 'img' origen = 'imagen.png' todo = 'imagen' ancho = '250' altura = '180' >
Texto...
< / división >
Agregar una propiedad clearfix expandirá automáticamente el elemento principal (contenedor) de acuerdo con el tamaño del elemento secundario que es la imagen insertada:
Así es como funciona una propiedad Clearfix en HTML.
Conclusión
Se utiliza una propiedad clearfix para ajustar los elementos secundarios en HTML de acuerdo con los elementos principales con una propiedad clearfix simple sin necesidad de marcas adicionales. El uso de CSS Clearfix aumenta o disminuye las dimensiones de los elementos principales para ajustarlos de acuerdo con las dimensiones de los elementos secundarios.