Οι πλωτήρες CSS εξηγούνται με οδήγηση μιας κυλιόμενης σκάλας

Εάν έχετε πηδήσει ποτέ σε μια κυλιόμενη σκάλα, τότε μπορείτε να καταλάβετε γρήγορα τα πλωτά.

Το

σας είναι σχεδόν τέλειο. Αποφασίζετε να εισαγάγετε μερικά πλωτήρες για να καθορίσετε τη σχέση μεταξύ μερικών στοιχείων.

Το επόμενο πράγμα που ξέρετε, τα νεοεμφανιζόμενα στοιχεία σας ξεπηδούν από την προσεκτικά επιλεγμένη σειρά σας και κολλούν στο πλάι του div σας σαν μαγνήτης. Η φράση "ακούσια συμπεριφορά" έρχεται στο μυαλό.

Έχω προσωπικά περάσει ώρες προσπαθώντας να καταλάβω πλήρως τους πλωτήρες. Διάβασα ένα άρθρο και έλεγα: "Ω, αυτό είναι λογικό!" Τότε θα επέστρεφα στον κώδικα μου, θα το δοκιμάσω και ... θα αποτύχει. Πίσω στο σχεδιαστήριο.

Πάω να καταβάλλω κάθε δυνατή προσπάθεια για να σας εξοικονομήσω αυτή τη μοίρα.

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

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

Πρέπει να σέβομαι τη λωρίδα διέλευσης

Η προκαθορισμένη ροή στοιχείων είναι κάτι σαν την παραπάνω εικόνα. Κάποιος τύπος στέκεται στη μέση με το χέρι του πάνω στο κιγκλίδωμα. Γυρίζει όλη την κυλιόμενη σκάλα. Κανείς δεν μπορεί να τον περάσει. Αρκετά φτωχή ετικέτα κυλιόμενων κλιμάκων.

Στέκεται πίσω από μια ομάδα άλλων ανθρώπων που κάνουν το ίδιο πράγμα, οπότε κανείς δεν μπορεί να τους περάσει ούτε. Δεν υπάρχει έννοια των λωρίδων ή της βασικής ανθρώπινης ευπρέπειας.

Αυτό είναι το σενάριο όταν δεν χρησιμοποιείτε πλωτήρες καθόλου.

Εντάξει, τώρα μιλάμε! Οι άνθρωποι που δείχνουν κάποιο επίπεδο συνειδητοποίησης. Αγαπούν να το δουν.

Έχουμε μια λωρίδα σχηματισμένη στα αριστερά και μια άλλη λωρίδα σχηματίζεται στα δεξιά. Άλλοι άνθρωποι μπορούν εύκολα να κινηθούν γύρω από τους δύο ανθρώπους που στέκονται ακόμα και να περπατήσουν μέχρι την κυλιόμενη σκάλα πιο γρήγορα, αν θέλουν. Κανείς δεν εμποδίζει τη ροή στέκεται στη μέση.

Αυτό είναι το σενάριο όταν χρησιμοποιείτε πλωτήρες στο div σας. Υπάρχει μια αριστερή ροή και μια δεξιά ροή, και τα στοιχεία που δεν επιπλέουν μπορούν εύκολα να γεμίσουν το χώρο που δεν λαμβάνεται από τα επιπλεόν στοιχεία.

Πλωτήρες: Αριστερά και Δεξιά

Χρησιμοποιώντας πλωτήρες μπορούν να εισαχθούν έως και δύο νέες ροές: αριστερά και δεξιά.

Και αυτό επιτρέπει την κανονική ροή στοιχείων, εκείνων που δεν έχουν αξία float, για να γεμίσουν τα κενά γύρω από αυτά τα στοιχεία.

Οι πλωτήρες σας επιτρέπουν να δημιουργήσετε αυτές τις νέες σχέσεις μεταξύ ροών.

Εάν είχατε μια γραμμή ανθρώπων που στέκονται στη μέση του ανελκυστήρα, θα έχετε περιορισμένες επιλογές για νέες δομές. Αλλά όταν έχετε αριστερή και δεξιά στήλη, ξαφνικά μπορείτε να καθορίσετε ότι ορισμένοι άνθρωποι στέκονται στα δεξιά, άλλοι μένουν αριστερά και μια άλλη ομάδα μπορεί να γεμίσει τα κενά.

Αυτό σας επιτρέπει να δημιουργήσετε πιο ευανάγνωστο και κατανοητό κώδικα, επειδή η ιδιότητα float δίνει επίσης ένδειξη της σχέσης ενός στοιχείου με τα περιβάλλοντα στοιχεία.

Η Καθαρή ιδιότητα

Υπάρχει μια ακόμη ρυτίδα που δεν έχουμε συζητήσει ακόμη: η καθαρή ιδιότητα. Το "Clear" επιτρέπει στα στοιχεία να καθορίζουν πού πρέπει να ευθυγραμμίζονται σε σύγκριση με τα επιπλεόν στοιχεία.

Στην πρώτη εικόνα του τμήματος "Πλωτήρες", οι δύο αναβατήρες με κυλιόμενες σκάλες ήταν ευτυχισμένοι σε κάθε πλευρά της κυλιόμενης σκάλας. Αυτό επιτρέπει σε άλλους να τα περάσουν και να κινούνται ελεύθερα όπως επιθυμούν.

Ας υποθέσουμε ότι αντί να έχουμε ένα επιπλέει αριστερό στοιχείο και ένα επιπλέων σωστό στοιχείο, έχουμε αντ 'αυτού 3 πλωτά αριστερά στοιχεία και 1 στα δεξιά. Τα τρία πλωτά αριστερά στοιχεία θα στοιβάζονται σε μια γραμμή στα αριστερά αν τους δώσουμε επίσης την ιδιότητα "clear: left". Αν όμως ευθυγραμμιστούν οριζοντίως με το επιπλεγμένο δεξιό στοιχείο, θα μπορούσε να είναι πολύ δύσκολο ή και αδύνατο να περάσει η κανονική ροή των στοιχείων:

Το "Clear: left" λέει σε κάθε άτομο που επιπλέει αριστερά ότι πρέπει να ευθυγραμμιστεί πίσω από το πρώτο στοιχείο που μετατοπίζεται αριστερά. Ανάλογα με το μέγεθος των κάτω δύο ατόμων, θα μπορούσε να είναι δύσκολο για οποιαδήποτε φυσιολογικά στοιχεία να συμπιέσουν και να καταλάβουν τον χώρο στην πάνω δεξιά γωνία. Έτσι, ακόμη και οι καλές πρακτικές κυλιόμενων σκαλοπατιών μπορούν να οδηγήσουν ακόμα σε μπλοκαρίσματα.

Μία από τις πιο συχνές χρήσεις της σαφούς ιδιοκτησίας είναι "σαφής: και οι δύο". Αυτό σας επιτρέπει να επαναφέρετε τη ροή των στοιχείων, σε αντίθεση με τη συνέχιση της διατήρησης δεξιάς, αριστεράς και κανονικής ροής. Είναι κάπως σαν εκείνος ο τύπος στην κυλιόμενη σκάλα που καταλαμβάνει όλο τον χώρο επειδή έφερε τη βαλίτσα του.

Με το "σαφές: και τα δύο", δεν έχει σημασία πού αυτός ο τύπος στέκεται σε προσανατολισμό προς τη βαλίτσα του. Δεν έχει σημασία ποιος στέκεται αριστερά ή δεξιά πάνω του. Ακόμα μπλοκάρει ολόκληρη την κυλιόμενη σκάλα. Οι άνθρωποι που ακολουθούν θα πρέπει να ξεκινήσουν μια νέα ροή στοιχείων, τα οποία θα μπορούσαν να περιλαμβάνουν οποιαδήποτε από τις τρεις ροές: αριστερά, δεξιά ή κανονικά.

Έχει ξεφύγει από το σύστημα τριών ροών και επαναφέρει τους κανόνες. Κακό για άτομα που θέλουν να τρέξουν την κυλιόμενη σκάλα; Σίγουρος. Αλλά είναι καλό αν θέλετε να εμποδίσετε οποιονδήποτε να περάσει.

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

Αν σας αρέσει αυτή η ανάρτηση, μπορείτε επίσης να απολαύσετε και άλλες επεξηγήσεις σχετικά με τα θέματα CSS και JavaScript, όπως η τοποθέτηση, η προβολή μοντέλου-ελεγκτή και οι επανάκλησεις.

Και αν νομίζετε ότι αυτό μπορεί να βοηθήσει άλλους ανθρώπους στην ίδια θέση με εσάς, δώστε την "καρδιά"!

Αυτή η ανάρτηση εμφανίστηκε αρχικά στο blog του CodeAnalogies.