Η καθαρή ιδιότητα CSS αποτελεί μέρος του CSS από το CSS1. Σας επιτρέπει να ορίσετε ποια στοιχεία μπορούν να επιπλέουν δίπλα στο στοιχείο που έχει εκκαθαριστεί και από ποια πλευρά (ες). Η καθαρή ιδιότητα έχει πέντε πιθανές τιμές:
- κανένας
- αριστερά
- σωστά
- και τα δυο
- κληρονομώ
Πώς να χρησιμοποιήσετε το CSS Clear property
Ο πιο συνηθισμένος τρόπος χρήσης της ιδιότητας διαγραφής είναι μετά την χρήση μιας ιδιότητας float σε ένα στοιχείο. Για παράδειγμα:
Κείμενο δίπλα στην εικόνα μου.
Κείμενο κάτω από την εικόνα μου.
Όλα τα προεπιλεγμένα στοιχεία για διαγραφή: κανένα. , οπότε αν δεν θέλετε άλλα στοιχεία να επιπλέουν δίπλα σε κάτι, πρέπει να αλλάξετε το καθαρό ύφος.
Όταν καθαρίζετε τα πλωτά, ταιριάζετε με το σαφές σας στο πλωτήρα σας. Έτσι, αν πλεύσετε το στοιχείο προς τα αριστερά, θα πρέπει να καθαρίσετε προς τα αριστερά. Το επιπλεκόμενο στοιχείο θα συνεχίσει να επιπλέει, αλλά το στοιχείο που έχει εκκαθαριστεί και όλα μετά από αυτό θα εμφανιστούν κάτω από αυτό στην ιστοσελίδα.
Αν έχετε στοιχεία που μεταφέρονται τόσο προς τα δεξιά όσο και προς τα αριστερά, μπορείτε να διαγράψετε μόνο τη μία πλευρά ή να διαγράψετε και τα δύο.
Χρησιμοποιώντας τη σαφή διάταξη
Ο πιο συνηθισμένος τρόπος που οι περισσότεροι σχεδιαστές χρησιμοποιούν τη σαφή ιδιότητα είναι στη διάταξη των στοιχείων της σελίδας . Μπορεί να έχετε μια εικόνα που επιπλέει μέσα σε ένα μπλοκ κειμένου και θέλετε η επόμενη παράγραφο να ξεκινά κάτω από την εικόνα ή να έχετε μια ολόκληρη στήλη κειμένου που θέλετε να επιπλέξετε δίπλα σε μια άλλη δέσμη κειμένου, με κάποιο κείμενο να εμφανίζεται παρακάτω.
Εδώ είναι το HTML για μια διάταξη σε αυτή τη φόρμα.
Έχει ένα δοχείο div που κατέχει ένα άλλο που επιπλέει στα αριστερά.
Μια σύντομη πτήση div
Περιεχόμενα μέσα στο δοχείο div που πρόκειται να είναι στα δεξιά του πλωτού div.
Αυτό θα λειτουργήσει σωστά, με το μικρότερο div να κυμαίνεται στα αριστερά του υπόλοιπου περιεχομένου του κύριου div.
Μπορείτε να καθαρίσετε το κείμενο δίπλα στο κινούμενο πλαίσιο προσθέτοντας απλά μια ετικέτα όπου θέλετε να ξεκινήσει η γραφή κάτω από το κινούμενο πλαίσιο.
Αλλά το πρόβλημα έρχεται όταν το κινούμενο κιβώτιο είναι μεγαλύτερο από το περιεχόμενο δίπλα του. Στη συνέχεια, όπως μπορείτε να δείτε, το χρώμα φόντου του κύριου κουτιού δεν μεταφέρεται προς τα κάτω στο κάτω μέρος του κινούμενου κιβωτίου.
Ευτυχώς, υπάρχει ένας εύκολος τρόπος για να διορθώσετε αυτό: την ιδιοκτησία. Ρυθμίζοντας το κεντρικό κουτί σε υπερχείλιση: αυτόματα. το χρώμα φόντου θα παραμείνει δίπλα στο μακρύτερο κινούμενο πλαίσιο στο κάτω μέρος, όπως φαίνεται σε αυτό το παράδειγμα .