Qu'est-ce qu'un filet?

Effacer les flotteurs dans un navigateur est important pour de nombreux développeurs. Un ClearFix est une propriété CSS (plus communément appelée hack) qui est utilisée pour effacer ou réparer les éléments enfants d'une classe sans nécessiter de majoration supplémentaire. Il efface les bogues qui se produisent lorsque deux éléments flottants s'empilent l'un à côté de l'autre.

L'utilisation de la propriété ClearFix peut ajuster automatiquement l'élément parent en fonction de l'élément enfant et résoudre les problèmes dans un code HTML via certains attributs comme «débordement"Cela contrôle les dimensions des éléments parents et enfants sans nécessiter de majoration supplémentaire.

Utilisation de la propriété ClearFix

Comprenons l'utilisation d'une propriété ClearFix pour savoir ce qu'elle fait à la sortie en ajoutant une propriété CSS ClearFix dans un extrait de code HTML:

Sans propriété clearfix

Exécutons un extrait de code sans exécuter la propriété ClearFix pour comprendre le type de problèmes que ClearFix est capable de résoudre:

Créez une classe dans HTML qui insère une image dans un conteneur Div:

Texte…

Voici le code CSS pour le HTML ci-dessus:

Cela générera la sortie de telle manière que la classe d'enfants contenant l'image débordera à l'extérieur du conteneur. Dans des situations comme celle-ci, la propriété Clear Fix peut être utilisée pour effacer ou résoudre ce problème facilement:

Avec la propriété ClearFix

Pour résoudre le problème, nous pouvons simplement ajouter un débordement attribut avec la valeur égale à auto qui ajustera le conteneur parent en fonction de la taille de l'élément enfant:

Ici, dans cet extrait de code, la classe parent est le conteneur et l'image est insérée dans sa classe infantile:

Texte…

L'ajout d'une propriété ClearFix élargira automatiquement l'élément parent (conteneur) en fonction de la taille de l'élément enfant qui est l'image insérée:

C'est ainsi qu'une propriété ClearFix dans HTML fonctionne.

Conclusion

Une propriété ClearFix est utilisée pour ajuster les éléments enfants en HTML en fonction des éléments parents avec une simple propriété ClearFix sans nécessiter des majorations supplémentaires. L'utilisation de CSS Clearfix augmente ou diminue les dimensions des éléments parents pour les ajuster en fonction des dimensions des éléments enfants.