Η χρήση της ιδιότητας Clearfix μπορεί να προσαρμόσει αυτόματα το γονικό στοιχείο σύμφωνα με το θυγατρικό στοιχείο και να διορθώσει τα προβλήματα σε έναν κώδικα HTML μέσω ορισμένων χαρακτηριστικών όπως ' ξεχείλισμα ' που ελέγχει τις διαστάσεις των γονικών και θυγατρικών στοιχείων χωρίς να απαιτεί πρόσθετες σημάνσεις.
Χρήση της ιδιότητας Clearfix
Ας κατανοήσουμε τη χρήση μιας ιδιότητας clearfix για να γνωρίζουμε τι κάνει στην έξοδο προσθέτοντας μια ιδιότητα clearfix CSS σε ένα απόσπασμα κώδικα HTML:
Χωρίς Clearfix Property
Ας εκτελέσουμε ένα απόσπασμα κώδικα χωρίς να εκτελέσουμε την ιδιότητα clearfix για να κατανοήσουμε το είδος των προβλημάτων που μπορεί να επιλύσει το clearfix:
Δημιουργήστε μια κλάση σε HTML που εισάγει μια εικόνα σε ένα κοντέινερ div:
< div τάξη = 'διεύρυνση' >
< br >< img τάξη = 'img' src = 'image.png' τα παντα = 'εικόνα' πλάτος = '250' ύψος = '180' >
Κείμενο...
< / div >
Ακολουθεί ο κώδικας CSS για το παραπάνω HTML:
<στυλ >
.καθαρίζω {
σύνορο : 3 εικονοστοιχεία στερεός #2baa12 ;
υλικό παραγεμίσματος : 5 εικονοστοιχεία ;
}
.img {
φλοτέρ : αριστερά ;
}
>
Αυτό θα δημιουργήσει την έξοδο με τέτοιο τρόπο ώστε η θυγατρική τάξη που περιέχει την εικόνα να υπερχειλίσει έξω από το κοντέινερ. Σε περιπτώσεις όπως αυτή, η ιδιότητα διαγραφής επιδιόρθωσης μπορεί να χρησιμοποιηθεί για την εύκολη εκκαθάριση ή επίλυση αυτού του ζητήματος:
Με την ιδιότητα Clearfix
Για να διορθώσουμε το πρόβλημα, μπορούμε απλώς να προσθέσουμε ένα ξεχείλισμα χαρακτηριστικό με την τιμή ίση με αυτο που θα προσαρμόσει το γονικό κοντέινερ σύμφωνα με το μέγεθος του θυγατρικού στοιχείου:
<στυλ >.καθαρίζω {
σύνορο : 3 εικονοστοιχεία στερεός #2baa12 ;
υλικό παραγεμίσματος : 5 εικονοστοιχεία ;
}
.καθαρίζω {
ξεχείλισμα : αυτο ;
}
.img {
φλοτέρ : αριστερά ;
}
>
Εδώ σε αυτό το απόσπασμα κώδικα, η γονική κλάση είναι το κοντέινερ και η εικόνα εισάγεται στη θυγατρική της τάξη:
< div τάξη = 'διεύρυνση' >< br >< img τάξη = 'img' src = 'image.png' τα παντα = 'εικόνα' πλάτος = '250' ύψος = '180' >
Κείμενο...
< / div >
Η προσθήκη μιας ιδιότητας clearfix θα επεκτείνει αυτόματα το γονικό στοιχείο (κοντέινερ) ανάλογα με το μέγεθος του θυγατρικού στοιχείου που είναι η εικόνα που έχει εισαχθεί:
Έτσι λειτουργεί μια ιδιότητα Clearfix σε HTML.
συμπέρασμα
Μια ιδιότητα clearfix χρησιμοποιείται για την προσαρμογή των θυγατρικών στοιχείων σε HTML σύμφωνα με τα γονικά στοιχεία με μια απλή ιδιότητα clearfix χωρίς να απαιτούνται πρόσθετες σημάνσεις. Η χρήση του CSS Clearfix αυξάνει ή μειώνει τις διαστάσεις των γονικών στοιχείων για να τα προσαρμόσει σύμφωνα με τις διαστάσεις των θυγατρικών στοιχείων.