Ποιες μέθοδοι απαγόρευσης ροής (clearing) γνωρίζετε…

clear: both;: Η πιο κοινή και αξιόπιστη μέθοδος. Εφαρμόζεται σε ένα στοιχείο που πρέπει να τοποθετηθεί κάτω από όλα τα προηγούμενα στοιχεία με πλωτήρα. Αυτό μπορεί να είναι ένα ξεχωριστό κενό στοιχείο ή ένα από τα στοιχεία διάταξης.
Προσθήκη κενής στοιχείου με clear: both;: Μερικές φορές χρησιμοποιείται για να διασφαλίσει την εκκαθάριση της ροής, ειδικά όταν εργάζεστε με πολύπλοκες διατάξεις. Είναι ένα κενό div ή άλλο στοιχείο μπλοκ.
Pseudo-στοιχείο :after με clear: both;: Μια πιο σύγχρονη προσέγγιση. Εφαρμόζεται στον κοντέινερ των πλωτήρων. Δημιουργεί ένα "εικονικό" στοιχείο μετά το τελευταίο περιεχόμενο του κοντέινερ, διαγράφοντας έτσι τη εσωτερική ροή.

/* Παράδειγμα χρήσης του pseudo-στοιχείου :after */
.container::after {
  content: ""; /* Υποχρεωτική ιδιότητα για pseudo-στοιχεία */
  display: table; /* Συχνά χρησιμοποιείται για καλύτερη συμβατότητα */
  clear: both;
}

overflow: hidden; ή overflow: auto;: Εφαρμόζεται στον κοντέινερ των πλωτήρων. Δημιουργεί ένα νέο πλαίσιο μορφοποίησης μπλοκ που "καθαρίζει" τη εσωτερική ροή. Ωστόσο, αυτό μπορεί να κόψει το περιεχόμενο ή να δημιουργήσει γραμμές κύλισης αν το περιεχόμενο υπερβαίνει τα όρια του κοντέινερ.
Πλαίσιο μορφοποίησης μπλοκ (BFC): Όλες οι παραπάνω μέθοδοι, εκτός από το ρητά κενό στοιχείο, δημιουργούν με κάποιο τρόπο ένα νέο BFC, που οδηγεί στην εκκαθάριση της ροής. Ιδιότητες που δημιουργούν BFC:
- float (μη μηδενική τιμή)
- overflow (τιμή διαφορετική από το visible)
- display: inline-block
- position: absolute ή fixed
- display: flow-root; (σχετικά νέο, δημιουργεί ρητά ένα BFC)

Πίνακας σύγκρισης μεθόδων:

Μέθοδος	Εφαρμογή σε	Τρόπος εκκαθάρισης	Πιθανά προβλήματα
`clear: both;`	Στοιχείο	Ρητή εκκαθάριση	Πρόσθετο στοιχείο
Κενό στοιχείο + `clear`	Κενό στοιχείο	Ρητή εκκαθάριση	Πρόσθετο στοιχείο
`:after` + `clear`	Κοντέινερ	Pseudo-στοιχείο	Πιο δύσκολο στην κατανόηση για αρχάριους
`overflow: hidden/auto;`	Κοντέινερ	Δημιουργία BFC	Κόψιμο / γραμμές κύλισης
Δημιουργία BFC με άλλη ιδιότητα	Κοντέινερ	Δημιουργία BFC	Μη επιθυμητές παρενέργειες
`display: flow-root;`	Κοντέινερ	Ρητή δημιουργία BFC	Περιορισμένη υποστήριξη σε παλαιότερους browsers

Πού εφαρμόζεται:

Για να ξεκινάει η εμφάνιση ενός στοιχείου κάτω από τα πλωτά στοιχεία.
Για να μην συρρικνώνεται το κοντέινερ που περιέχει μόνο πλωτά στοιχεία.
Σε πολύπλοκα layouts για τον έλεγχο της ροής του εγγράφου γύρω από πλωτά στοιχεία.

Ποιες μέθοδοι απαγόρευσης ροής (clearing) γνωρίζετε και πού εφαρμόζονται;