Επιπλέουν - CSS-Κόλπα

Η floatιδιότητα στο CSS χρησιμοποιείται για τοποθέτηση και διάταξη σε ιστοσελίδες.

.module ( float: left; )

Αξίες

• none: το στοιχείο δεν επιπλέει. Αυτή είναι η αρχική τιμή.
• left: επιπλέει το στοιχείο στα αριστερά του κοντέινερ του.
• right: επιπλέει το στοιχείο στα δεξιά του κοντέινερ του.
• inherit: το στοιχείο κληρονομεί την κατεύθυνση πλωτήρα του γονέα του

Σημείωση: Ένα στοιχείο που αιωρείται είναι αυτόματα display: block;

Τι σημαίνει το Float;

Για να κατανοήσουμε τον σκοπό και την προέλευση του float, μπορούμε να κοιτάξουμε το σχέδιο εκτύπωσης. Σε διάταξη εκτύπωσης, οι εικόνες μπορούν να τοποθετηθούν στη σελίδα έτσι ώστε το κείμενο να τυλίγεται γύρω τους, όπως απαιτείται. Αυτό ονομάζεται συνήθως και κατάλληλα «αναδίπλωση κειμένου». Εδώ είναι ένα παράδειγμα αυτού.

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

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

Διαδήλωση

Αυτό το demo δείχνει ένα άρθρο με δύο εικόνες: ένα σετ float: leftκαι ένα σε float: right. Πατήστε το κουμπί "εναλλαγή επιπλέων" για εναλλαγή και απενεργοποίηση των πλωτήρων.

Ανατρέξτε στο Παράδειγμα Pen Float από CSS-Tricks (@ css-tricks) στο CodePen.

Floats για διάταξη

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

Τα επιπλέοντα σώματα είναι επίσης χρήσιμα για διάταξη σε μικρότερες περιπτώσεις. Πάρτε για παράδειγμα αυτή τη μικρή περιοχή μιας ιστοσελίδας. Εάν χρησιμοποιούμε floatγια την εικόνα του avatar μας, όταν αλλάζει το μέγεθος της εικόνας, το κείμενο στο πλαίσιο θα μετατοπιστεί για να το φιλοξενήσει:

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

Διαδήλωση

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

Δείτε το Pen Float Demo από CSS-Tricks (@ css-tricks) στο CodePen.

Εκκαθάριση του Float

Η αδελφή ιδιοκτησία του Float είναι clear. Ένα στοιχείο που έχει την clearιδιότητα να είναι πάνω του δεν θα κινηθεί δίπλα στο πλωτήρα όπως επιθυμεί ο πλωτήρας, αλλά θα κινηθεί κάτω από το πλωτήρα. Και πάλι μια εικόνα είναι πιο χρήσιμη από τις λέξεις:

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

#footer ( clear: both; )

Το Clear έχει επίσης τέσσερις έγκυρες τιμές. Η τιμή bothχρησιμοποιείται πιο συχνά, η οποία καθαρίζει τα επιπλέοντα που προέρχονται από κάθε κατεύθυνση. Οι τιμές leftκαι rightμπορούν να χρησιμοποιηθούν για να καθαρίσετε το float μόνο από μία κατεύθυνση αντίστοιχα. Η αρχική τιμή είναι none, η οποία είναι συνήθως περιττή εκτός εάν χρησιμοποιείται για την κατάργηση ρητής clearτιμής που έχει οριστεί. Η τιμή inheritκάνει το στοιχείο να κληρονομήσει την clearτιμή του γονέα του . Περιέργως, ο Internet Explorer δεν υποστήριξε αυτήν την τιμή μέχρι το IE8.

Η εκκαθάριση μόνο του leftή rightεπιπλέει, ενώ είναι λιγότερο συχνό στην άγρια ​​φύση, έχει σίγουρα τις χρήσεις του.

Η μεγάλη κατάρρευση

Ένα από τα πιο περίεργα πράγματα σχετικά με την εργασία με πλωτήρες είναι πώς μπορούν να επηρεάσουν το στοιχείο που τα περιέχει (το στοιχείο «γονέας»). Εάν ένα γονικό στοιχείο δεν περιέχει τίποτα εκτός από κινούμενα στοιχεία, το ύψος του καταρρέει. Αυτό δεν είναι πάντα προφανές εάν ο γονέας δεν περιέχει οπτικά ορατό υπόβαθρο, αλλά είναι σημαντικό να γνωρίζετε.

Όσο αντιφατικό όσο φαίνεται να καταρρέει, η εναλλακτική λύση είναι χειρότερη. Εξετάστε αυτό το σενάριο:

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

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

Τεχνικές καθαρισμού πλωτών

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

• Η μέθοδος Empty Div είναι, κυριολεκτικά, ένα κενό div. . Μερικές φορές θα δείτε ένα
στοιχείο ή κάποιο άλλο τυχαίο στοιχείο που χρησιμοποιείται, αλλά το div είναι το πιο συνηθισμένο επειδή δεν έχει προεπιλεγμένο στυλ προγράμματος περιήγησης, δεν έχει καμία ειδική λειτουργία και είναι απίθανο να είναι γενικά στιλ με CSS. Αυτή η μέθοδος περιφρονείται από σημασιολογικούς καθαριστές, δεδομένου ότι δεν έχει καμία σημασία για τη σελίδα και υπάρχει αποκλειστικά για παρουσίαση. Φυσικά, με την πιο αυστηρή έννοια, έχουν δίκιο. Όμως, κάνει τη δουλειά και δεν βλάπτει κανέναν.
• Η μέθοδος υπερχείλισης βασίζεται στη ρύθμιση της overflowιδιότητας CSS σε ένα γονικό στοιχείο. Εάν αυτή η ιδιότητα έχει οριστεί στο autoή hiddenστο στοιχείο γονικού στοιχείου, ο γονέας θα επεκταθεί ώστε να περιέχει τα επιπλέοντα, καθαρίζοντάς το ουσιαστικά για τα επόμενα στοιχεία. Αυτή η μέθοδος μπορεί να είναι υπέροχα σημασιολογική, καθώς ενδέχεται να μην απαιτεί επιπλέον στοιχεία. Ωστόσο, εάν βρεθείτε να προσθέτετε ένα νέο divμόνο για να το εφαρμόσετε, είναι εξίσου μη σημασιολογικό με την κενή divμέθοδο και λιγότερο προσαρμόσιμο. Λάβετε επίσης υπόψη ότι η ιδιότητα υπερχείλισης δεν προορίζεται ειδικά για εκκαθάριση πλωτών. Προσέξτε να μην αποκρύψετε περιεχόμενο ή να προκαλέσετε ανεπιθύμητες γραμμές κύλισης.
• Η μέθοδος Easy Clearing (αλλιώς γνωστή ως "clearfix") χρησιμοποιεί έναν έξυπνο επιλογέα ψευδο CSS ( :after) για να καθαρίσει τα επιπλέοντα. Αντί να ρυθμίσετε την υπερχείλιση στον γονέα, εφαρμόζετε μια πρόσθετη κλάση όπως "Clearfix" σε αυτήν. Στη συνέχεια, εφαρμόστε αυτό το CSS:

  .clearfix:after ( content: ""; visibility: hidden; display: block; height: 0; clear: both; )

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

Διαφορετικά σενάρια απαιτούν διαφορετικές μεθόδους εκκαθάρισης πλωτήρα. Πάρτε για παράδειγμα ένα πλέγμα μπλοκ, καθένα από διαφορετικούς τύπους.

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

Προβλήματα με πλωτήρες

Τα επιπλέοντα συχνά χτυπούνται επειδή είναι εύθραυστα. Η πλειονότητα αυτής της ευθραυστότητας προήλθε από σφάλματα στα IE6 και IE7. Καθώς αυτά τα προγράμματα περιήγησης ξεθωριάζουν στο παρελθόν, αυτά τα σφάλματα εξασθενίζουν μαζί τους. Ωστόσο, αξίζει να τα καταλάβετε αν χρειαστεί να κάνετε εντοπισμό σφαλμάτων "OldIE".

• Το Pushdown είναι ένα σύμπτωμα ενός στοιχείου μέσα σε ένα πλωτό αντικείμενο που είναι ευρύτερο από το ίδιο το float (συνήθως μια εικόνα). Τα περισσότερα προγράμματα περιήγησης αποδίδουν την εικόνα έξω από το float, αλλά το μέρος που δεν κολλάει επηρεάζει άλλη διάταξη. Οι παλιές εκδόσεις του IE επέκτειναν το float για να περιέχουν την εικόνα, επηρεάζοντας συχνά δραστικά τη διάταξη. Ένα συνηθισμένο παράδειγμα είναι μια εικόνα που βγαίνει από το κύριο περιεχόμενο, ωθήστε την πλευρική γραμμή κάτω.
  

  

  Γρήγορη επιδιόρθωση: Βεβαιωθείτε ότι δεν έχετε εικόνες που να το κάνουν, χρησιμοποιήστε overflow: hidden;για να κόψετε την περίσσεια.

• Double Margin Bug - Ένα άλλο πράγμα που πρέπει να θυμάστε όταν αντιμετωπίζετε το IE 6 είναι ότι εάν εφαρμόσετε ένα περιθώριο στην ίδια κατεύθυνση με το float, θα διπλασιαστεί το περιθώριο. Γρήγορη επιδιόρθωση: ρυθμίστε display: inlineτο float και μην ανησυχείτε ότι θα παραμείνει ένα στοιχείο επιπέδου μπλοκ.
• Το 3px Jog είναι όταν το κείμενο που βρίσκεται δίπλα σε ένα αιωρούμενο στοιχείο κλωτσάται μυστηριωδώς από 3px σαν ένα περίεργο πεδίο δύναμης γύρω από το float. Γρήγορη επιδιόρθωση: ορίστε ένα πλάτος ή ύψος στο κείμενο που επηρεάζεται.
• Στο IE 7, το Bug Bottom Margin ήταν όταν ένας πλωτός γονέας έχει αιωρούμενα παιδιά μέσα του, το κάτω περιθώριο σε αυτά τα παιδιά αγνοείται από τον γονέα. Γρήγορη επιδιόρθωση: χρησιμοποιώντας αντλία βάσης στο γονέα.

Εναλλακτικές

Εάν χρειάζεστε κείμενο που περιβάλλει εικόνες, δεν υπάρχουν πραγματικά εναλλακτικές λύσεις για float. Μιλώντας για αυτό, ρίξτε μια ματιά σε αυτήν την μάλλον έξυπνη τεχνική για να τυλίξετε κείμενο γύρω από ακανόνιστα σχήματα. Αλλά για τη διάταξη της σελίδας, σίγουρα υπάρχουν επιλογές. Ο Eric Sol έχει ένα άρθρο στο A List Apart, Faux Absolute Positioning, το οποίο περιγράφει μια πολύ ενδιαφέρουσα τεχνική που συνδυάζει με πολλούς τρόπους την ευελιξία των πλωτήρων με τη δύναμη της απόλυτης θέσης.

Το CSS3 αντιμετωπίζει τη διάταξη της σελίδας με δύο τρόπους:

• Flexbox
• Διάταξη πολλών στηλών
• Διάταξη πλέγματος

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

βίντεο

Έκανα ένα screencast λίγο πριν εξηγώντας πολλές από αυτές τις ιδέες float.

Σχετιζομαι με

• clear
• position

Περισσότερες πληροφορίες

• float στις προδιαγραφές W3C
• float στο MDN

Υποστήριξη προγράμματος περιήγησης

Χρώμιο	Σαφάρι	Firefox	ΛΥΡΙΚΗ ΣΚΗΝΗ	ΙΕ	Android	iOS
Ολα	Ολα	Ολα	Ολα	Ολα	Ολα	Ολα