¿Por qué la gente usa clearfix en lugar de display: inline-block y width: 100% en CSS?

Una corrección de CSS se utiliza para solucionar problemas relacionados con elementos secundarios flotantes dentro de un elemento primario. Sin un clearfix, sus elementos secundarios no se comportarán como usted también los espera. Cuando se flota un elemento HTML, puede parecer que se sienta fuera de su elemento padre y eso significa que no ajustará la altura de los padres en consecuencia.

Es importante recordar que un clearfix es un tipo de pirateo utilizado para solucionar problemas asociados con elementos secundarios flotantes dentro de un elemento primario. El flotador estaba destinado a ser utilizado; como ejemplo: para colocar elementos como imágenes dentro de una página. Cuando flota una imagen hacia la izquierda o hacia la derecha, el texto se ajustará a ella.

Se abusó de la práctica del elemento flotante para el diseño y, por lo tanto, esta reliquia del pasado permanece por ahora.

Para obtener más detalles, solo visite el siguiente enlace, seguramente lo ayudará a mí.

Cuándo y cómo usar un Clearfix – Tutorial CSS

Suponga que tiene un elemento

    dentro del cual tiene pocos elementos de lista, es decir,

  • que se alinearán horizontalmente. Si en ese caso está utilizando flotante para los elementos enumerados, la altura del elemento principal (

      ) se colapsará, lo que puede provocar que el estilo no se aplique como background-color etc.

      Por lo tanto, para evitar el colapso de la altura de su elemento principal, puede usar el hack de clearfix o simplemente puede usar el overflow: hidden

      Clearfix utiliza pseudo elementos e inserta algo de contenido antes y después del contenido real en el elemento.