¿Qué es un ClearFix??

Limpiar flotadores en un navegador es importante para muchos desarrolladores. Un ClearFix es una propiedad CSS (más comúnmente conocida como hack) que se usa para borrar o arreglar los elementos infantiles de una clase sin requerir ningún marcado adicional. Borra los errores que ocurren cuando dos elementos flotantes se apilan uno al lado del otro.

El uso de la propiedad ClearFix puede ajustar automáticamente el elemento principal de acuerdo con el elemento infantil y solucionar los problemas en un código HTML a través de algunos atributos como "Desbordamiento"Eso controla las dimensiones de los elementos padre e infantil sin requerir marcados adicionales.

Uso de la propiedad ClearFix

Entendamos el uso de una propiedad ClearFix para saber qué hace a la salida agregando una propiedad CSS ClearFix 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 inserta una imagen en un contenedor DIV:

Texto…

El siguiente es el código CSS para el HTML anterior:

Esto generará la salida de tal manera que la clase infantil que contenga la imagen se desborde 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 que ajustará el contenedor principal de acuerdo con el tamaño del elemento infantil:

Aquí en este fragmento de código, la clase principal es el contenedor y la imagen se inserta en su clase infantil:

Texto…

Agregar una propiedad ClearFix expandirá automáticamente el elemento principal (contenedor) de acuerdo con el tamaño del elemento infantil 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 infantiles en HTML de acuerdo con los elementos principales con una propiedad simple ClearFix sin requerir 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 infantiles.