Ποιες μεθόδους clearing γνωρίζετε και σε ποιες καταστάσεις εφαρμόζονται;

Μέθοδοι αποτροπής ροής:

• clear: left; — αποτρέπει τη ροή στα αριστερά. Εφαρμόζεται όταν το στοιχείο δεν πρέπει να βρίσκεται δίπλα στα στοιχεία που ρέουν αριστερά.
• clear: right; — αποτρέπει τη ροή στα δεξιά. Εφαρμόζεται όταν το στοιχείο δεν πρέπει να βρίσκεται δίπλα στα στοιχεία που ρέουν δεξιά.
• clear: both; — αποτρέπει τη ροή και από τις δύο πλευρές. Εφαρμόζεται όταν το στοιχείο δεν πρέπει να βρίσκεται δίπλα σε κανένα στοιχείο που ρέει. Αυτή είναι η πιο συνηθισμένη επιλογή.
• clear: none; (προεπιλεγμένη τιμή) — επιτρέπει τη ροή.

Εφαρμογές:

• Για την αποτροπή "καταρρεύσεων" του γονικού κοντέινερ: Αν όλα τα παιδικά στοιχεία του γονέα ρέουν (έχουν float), ο γονικός κοντέινερ χάνει το ύψος του και καταρρέει. Η προσθήκη ενός στοιχείου με clear: both; μετά από τα ρέοντα στοιχεία μέσα στον γονέα ή η χρήση του ψευδο-στοιχείου ::after με clear: both; λύνει αυτό το πρόβλημα.
• Για τη σωστή τοποθέτηση των στοιχείων μετά από αυτά που ρέουν: Αν τα κανονικά (μη ρέοντα) στοιχεία πρέπει να τοποθετηθούν κάτω από τα ρέοντα και όχι δίπλα τους.
• Για τη δημιουργία "γραμμών" ή "σειρών" σε διατάξεις με ρέοντα στοιχεία: Όταν τα στοιχεία με float πρέπει να διατάσσονται σε πολλές σειρές, χρησιμοποιείται το clear για να ξεκινήσει μια νέα σειρά.

Παράδειγμα χρήσης του ψευδο-στοιχείου ::after για καθαρισμό:

.clearfix::after {
  content: ""; /* Σημαντικό για την εμφάνιση του ψευδο-στοιχείου */
  display: table; /* Ή block */
  clear: both; /* Βασική ιδιότητα για καθαρισμό */
}

Αυτή η κλάση clearfix εφαρμόζεται στη γονική στοιχείο που περιέχει τα ρέοντα παιδικά στοιχεία.