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 ” qui contrôle les dimensions des éléments parent et enfant sans nécessiter de balisage 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 en HTML qui insère une image dans un conteneur div :
< div classe = 'clearfix' >
< Br >< image classe = 'img' src = 'image.png' tout = 'image' largeur = '250' hauteur = '180' >
Texte...
< / div >
Voici le code CSS pour le code HTML ci-dessus :
.clearfix {
frontière : 3px solide #2baa12 ;
rembourrage : 5px ;
}
.img {
flotter : gauche ;
}
>
Cela générera la sortie de telle sorte que la classe enfant qui contient l'image débordera en dehors du conteneur. Dans de telles situations, la propriété clear fix peut être utilisée pour résoudre ou résoudre facilement ce problème :
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 :
.clearfix {
frontière : 3px solide #2baa12 ;
rembourrage : 5px ;
}
.clearfix {
débordement : auto ;
}
.img {
flotter : gauche ;
}
>
Ici, dans cet extrait de code, la classe parent est le conteneur et l'image est insérée dans sa classe enfant :
< div classe = 'clearfix' >< Br >< image classe = 'img' src = 'image.png' tout = 'image' largeur = '250' hauteur = '180' >
Texte...
< / div >
L'ajout d'une propriété clearfix développera automatiquement l'élément parent (conteneur) en fonction de la taille de l'élément enfant dans lequel l'image est insérée :
Voici comment fonctionne une propriété Clearfix en HTML.
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 de balisage supplémentaire. 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.