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

overflow: hidden; ή overflow: auto;: Εφαρμόζεται στο γονικό στοιχείο ενός ή περισσότερων στοιχείων με float. Δημιουργεί ένα νέο πλαίσιο μορφοποίησης μπλοκ (BFC), κάνοντας τον γονέα να περιλαμβάνει τα περιβάλλοντα στοιχεία στο ύψος του.

Κατάσταση: Ο πιο απλός τρόπος για να κρύψετε περιεχόμενο που υπερβαίνει τα όρια του στοιχείου ή να εφαρμόσετε κύλιση, αλλά λειτουργεί και ως μέθοδος καθαρισμού.

clear: both;: Εφαρμόζεται σε ένα στοιχείο που δεν πρέπει να περιβάλλει τα προηγούμενα στοιχεία με float. Αυτό το στοιχείο θα τοποθετηθεί κάτω από όλα τα περιβάλλοντα στοιχεία.

Κατάσταση: Όταν χρειάζεται να δημιουργήσετε μια νέα γραμμή ή ενότητα μετά από στοιχεία που περιβάλλουν το ένα το άλλο.

Μέθοδος clearfix (ψευδο-στοιχεία ::after): Προσθέτει ένα ψευδο-στοιχείο στον γονικό κοντέινερ με συγκεκριμένες ιδιότητες, μιμούμενο τη συμπεριφορά του clear: both;, αλλά χωρίς την ανάγκη προσθήκης επιπλέον HTML στοιχείων.

.clearfix::after {
    content: ""; /* Υποχρεωτικό περιεχόμενο για την εμφάνιση του ψευδο-στοιχείου */
    display: table; /* Δημιουργεί ένα νέο πλαίσιο μπλοκ, όπως το overflow: hidden; */
    clear: both; /* Εφαρμόζει τον καθαρισμό */
}

Κατάσταση: Ο πιο συνηθισμένος και συστηνόμενος τρόπος καθαρισμού, που είναι καθαρός και δεν διαταράσσει τη δομή του markup. Εφαρμόζεται στον γονικό στοιχείο που περιέχει τα περιβάλλοντα στοιχεία.

Χρήση display: flex ή display: grid: Σύγχρονες μέθοδοι διάταξης που δεν απαιτούν περιτύλιξη για την τοποθέτηση στοιχείων, εξαλείφοντας έτσι την ανάγκη για καθαρισμό. Κατάσταση: Κατά την κατασκευή σύνθετων διατάξεων ή όταν απαιτείται πιο ευέλικτος έλεγχος της διάταξης των στοιχείων.
Προσθήκη επιπλέον στοιχείου με clear: both; (παλαιότερη μέθοδος): Εισάγει ένα κενό HTML στοιχείο μετά από τα περιβάλλοντα στοιχεία και του εφαρμόζει clear: both;. Κατάσταση: Θεωρείται παρωχημένη και ανεπιθύμητη προσέγγιση, καθώς προσθέτει πλεονάζον HTML.

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