Float mania: μια εξήγηση του τρόπου λειτουργίας της ιδιότητας float CSS. Γενική επιδιόρθωση κλάσης. Σε τι χρησιμοποιείται το float;
Κατάλληλη χρήση CSS ιδιότητες επίπλευσηςμπορεί να είναι δεν είναι εύκολη υπόθεσηακόμα και για έναν έμπειρο σχεδιαστή layout. Αυτό το άρθρο περιέχει παραδείγματα χρήσης float, καθώς και ορισμένα σφάλματα, με επεξηγηματικά παραδείγματα.
Τι είναι το float;
Ορισμένα στοιχεία στο CSS είναι σε επίπεδο μπλοκ και επομένως ξεκινούν από νέα γραμμή. Για παράδειγμα, εάν τοποθετήσετε δύο παραγράφους με ετικέτες P, θα βρίσκονται η μία κάτω από την άλλη. Άλλα στοιχεία είναι «πεζά», δηλ. εμφανίζονται στη σελίδα σε μία γραμμή.Ένας τρόπος για να εκχωρήσετε εκ νέου έναν τύπο float σε στοιχεία είναι να χρησιμοποιήσετε την ιδιότητα float. Ένα κλασικό παράδειγμα είναι η χρήση float για τη στοίχιση μιας εικόνας προς τα αριστερά ή προς τα δεξιά. Εδώ είναι ο απλός κώδικας HTML για την εικόνα και την παράγραφο:
Lorem ipsum...
Εμφανίζονται σε μια νέα γραμμή:
Προσθέστε λίγο Εικόνα CSS:
img ( float: δεξιά, περιθώριο: 20 px; )
Αυτό έχει ως αποτέλεσμα τη σωστή ευθυγράμμιση:
Εάν υπάρχει περισσότερο κείμενο, η παράγραφος θα τυλίξει την εικόνα:
Ας υποθέσουμε ότι πρέπει να κάνουμε εσοχή 20 pixel μεταξύ της εικόνας και του κειμένου. Αυτή η κατασκευή δεν θα λειτουργήσει: p (περιθώριο: 20 px;)
Σωστά ως εξής:
img (περιθώριο: 20 px;)
Γιατί δεν λειτουργεί η εσοχή παραγράφου; Για να το καταλάβουμε, ας προσθέσουμε ένα πλαίσιο:
P ( περίγραμμα: συμπαγές 1px μαύρο; )
Το αποτέλεσμα μπορεί να σας εκπλήξει:
Αποδεικνύεται ότι η εικόνα είναι μέσα στην παράγραφο! Γι' αυτό δεν λειτουργεί ιδιοκτησία περιθωρίουΣτην πρώτη περίπτωση. Για να το διορθώσετε, μπορείτε να εφαρμόσετε το float:left στην παράγραφο και να καθορίσετε ένα απόλυτο πλάτος:
Περίεργοι κανόνες float
Ας προχωρήσουμε σε περισσότερα σύνθετες επιλογέςχρήση float: στους κανόνες που διέπουν τα αιωρούμενα αντικείμενα. Αυτό μπορεί να είναι απαραίτητο κατά τη διάταξη μιας συλλογής εικόνων. Για παράδειγμα:
Από προεπιλογή, κάθε στοιχείο λίστας θα εμφανίζεται σε μια νέα γραμμή. Εάν εφαρμόσετε float:left σε καθεμία, οι εικόνες θα ευθυγραμμιστούν με μια αλλαγή γραμμής:
Li ( float: αριστερά, περιθώριο: 4 px; )
Τι γίνεται όμως αν οι εικόνες είναι διαφορετικού ύψους;
Αν προσθέσουμε μια προβολή μιας γραμμής στα στοιχεία της λίστας, θα φαίνεται λίγο πιο όμορφη:
Li (οθόνη: ενσωματωμένη;)
Τώρα ας ευθυγραμμίσουμε κατακόρυφα:
Img (κατακόρυφη στοίχιση: επάνω; )
Θα πρέπει να θυμόμαστε ότι σε περίπτωση μεγαλύτερου ύψους των εικόνων, οι υπόλοιπες εικόνες τυλίγονται μόνο γύρω από την προηγούμενη, για παράδειγμα:
Ένα παράδειγμα αλλαγής της σειράς των στοιχείων - για παράδειγμα, έχουμε μια λίστα στοιχείων με τη σειρά:
Αν θέλουμε να τα βάλουμε με αντίστροφη σειρά, χρησιμοποιούμε απλώς float:right αντί για float:left και δεν χρειάζεται να αλλάξουμε τη σειρά στο HTML:
Η χρήση float είναι βολική για την ομαδοποίηση στοιχείων σε μια σελίδα, αλλά το μεγάλο πρόβλημα είναι ότι τα επόμενα στοιχεία (κείμενο ή μπλοκ) λαμβάνουν επίσης την ιδιότητα float. Για παράδειγμα, έχουμε ένα μπλοκ εικόνων:
Το κείμενο κάτω από αυτό αρχίζει να τυλίγεται γύρω από ολόκληρο το μπλοκ:
Για να το αποφύγετε αυτό, πρέπει να χρησιμοποιήσετε την ιδιότητα διαγραφής. Αν το εφαρμόσουμε στη δεύτερη εικόνα:
Ul li:nth-child(2) (καθαρό: αριστερά; )
Παίρνουμε αυτό:
Σε αυτήν την περίπτωση, οι υπόλοιπες εικόνες συνεχίζουν να κληρονομούν το float:left. Κατά συνέπεια, το κείμενο θα εμφανιστεί αδέξια:
Πρέπει να εφαρμόσετε το clear:both στην παράγραφο:
P ( σαφές: και τα δύο; )
Το πρόβλημά μας λύθηκε:
Τώρα ας πούμε ότι πρέπει να ορίσουμε το φόντο για τη συλλογή από τα προηγούμενα παραδείγματα. Εάν τα στοιχεία δεν επιπλέουν, θα έμοιαζε ως εξής:
Ul (φόντο: γκρι;)
Αλλά αν εφαρμόσετε το float:left στα στοιχεία της λίστας, το φόντο εξαφανίζεται εντελώς:
Αν ορίσουμε πρώτα το ύψος στο UL:
Ul (ύψος: 300 px;)
Αυτό επίσης δεν λύνει το πρόβλημα, γιατί... Οι διαστάσεις του φόντου έχουν οριστεί απολύτως. Θα μας βοηθήσει η κλάση clearfix, η οποία θα εφαρμοστεί στο div στο ίδιο επίπεδο με τα στοιχεία UL.
Clearfix (καθαρό: και τα δύο;)
Υπάρχει μια άλλη λύση χρησιμοποιώντας υπερχείλιση:
Ul (υπερχείλιση: αυτόματη;)
Εννέα κανόνες για στοιχεία float:
- Τα αιωρούμενα στοιχεία δεν μπορούν να εκτείνονται πέρα από την άκρη του μητρικού τους κοντέινερ.
- Κάθε αιωρούμενο στοιχείο θα εμφανίζεται δεξιά ή κάτω από το προηγούμενο με float:αριστερά ή αριστερά και κάτω από το προηγούμενο με float:right.
- Ένα μπλοκ με float:αριστερά δεν μπορεί να είναι πιο δεξιά από ένα μπλοκ με float:right.
- Ένα αιωρούμενο στοιχείο δεν μπορεί να εκτείνεται πέρα από το επάνω όριο του κοντέινερ του.
- Ένα αιωρούμενο στοιχείο δεν μπορεί να τοποθετηθεί ψηλότερα από το γονικό μπλοκ του ή το προηγούμενο αιωρούμενο στοιχείο.
- Ένα αιωρούμενο στοιχείο δεν μπορεί να τοποθετηθεί ψηλότερα από την προηγούμενη γραμμή ενσωματωμένων στοιχείων
- Το πλωτό μπλοκ πρέπει να τοποθετηθεί όσο πιο ψηλά γίνεται.
- Το ένα αιωρούμενο στοιχείο που ακολουθεί το άλλο δεν μπορεί να υπερβεί το κοντέινερ του - τυλίγεται στην επόμενη γραμμή.
- Ένα μπλοκ με float:αριστερά θα πρέπει να τοποθετηθεί όσο το δυνατόν πιο αριστερά και ένα μπλοκ με float:right θα πρέπει να τοποθετηθεί όσο πιο δεξιά γίνεται.
Πριν από μερικά χρόνια, όταν οι προγραμματιστές άρχισαν για πρώτη φορά να μεταβαίνουν σε σήμανση HTML χωρίς πίνακα, η ιδιότητα CSS float πήρε ξαφνικά έναν πολύ σημαντικό ρόλο. Ο λόγος που η ιδιότητα float έγινε τόσο κοινή ήταν επειδή, από προεπιλογή, τα στοιχεία μπλοκ δεν ευθυγραμμίζονταν το ένα δίπλα στο άλλο σε μορφή βασισμένη σε στήλη. Δεδομένου ότι οι στήλες απαιτούνται σχεδόν σε κάθε σχήμα CSS, αυτή η ιδιότητα έχει συνηθίσει - ακόμη και κατάχρηση.
Ιδιοκτησία float στο CSS, επιτρέπει στον προγραμματιστή να συμπεριλάβει στήλες τύπου πίνακα στη σήμανση HTML χωρίς τη χρήση πινάκων. Αν όχι για το ακίνητο φλοτέρ, τότε οι διατάξεις CSS δεν θα ήταν δυνατές εκτός από τη χρήση απόλυτης και σχετικής τοποθέτησης - κάτι που θα ήταν ατημέλητο και θα καθιστούσε τη διάταξη διάταξης μη διατηρημένη.
Σε αυτό το άρθρο θα σας πούμε τι είναι ακίνητο φλοτέρκαι πώς επηρεάζει στοιχεία σε συγκεκριμένα πλαίσια. Θα ρίξουμε επίσης μια ματιά σε ορισμένες από τις διαφορές που μπορεί να προκύψουν με αυτήν την ιδιότητα στα προγράμματα περιήγησης που χρησιμοποιούνται πιο συχνά. Τέλος, θα δείξουμε αρκετές πρακτικές εφαρμογές του ακινήτου φλοτέρ. Αυτό θα πρέπει επίσης να παρέχει μια ολοκληρωμένη και διεξοδική συζήτηση αυτής της ιδιότητας και του αντίκτυπού της στην ανάπτυξη CSS.
Ορισμός και σύνταξη ιδιοτήτων CSS Float
Ο σκοπός της ιδιότητας float είναι να ωθήσει ένα στοιχείο μπλοκ προς τα αριστερά ή προς τα δεξιά, αφαιρώντας το από τη ροή εγγράφων. Αυτό επιτρέπει στο τρέχον περιεχόμενο να συμπτύσσεται φυσικά γύρω από το αιωρούμενο στοιχείο. Αυτή η ιδέα είναι παρόμοια με αυτή που βλέπετε καθημερινά στην έντυπη λογοτεχνία, όπου οι φωτογραφίες και άλλα γραφικά στοιχεία είναι ευθυγραμμισμένα στη μία πλευρά και το περιεχόμενο (συνήθως κείμενο) ρέει φυσικά γύρω από το στοιχείο ευθυγραμμισμένο γύρω από την αριστερή ή τη δεξιά άκρη.
Η παραπάνω εικόνα δείχνει την ενότητα "Αναγνώστες" του ιστότοπου του περιοδικού .net με 3 φωτογραφίες αναγνωστών που αφήνονται στοιχισμένες στις στήλες τους με κείμενο που αναδιπλώνεται γύρω από τις εικόνες. Αυτή είναι η βασική ιδέα πίσω από την ιδιότητα float σε διατάξεις CSS και δείχνει μια από τις τεχνικές που χρησιμοποιούνται στη σχεδίαση πινάκων.
Η αποτελεσματικότητα της χρήσης floats σε διατάξεις πολλαπλών στηλών εξηγήθηκε από τον Douglas Bowman το 2004 στην κλασική παρουσίασή του No More Tables:
Ο Bowman εξήγησε τις αρχές πίσω από τη διάταξη χωρίς τραπέζι, χρησιμοποιώντας μια παλιά τοποθεσία της Microsoft ως αναφορά. Οι πλωτήρες χρησιμοποιήθηκαν ευρέως στην ψευδή αναθεώρηση της σήμανσης της Microsoft.
Σύνταξη
Η ιδιότητα Float μπορεί να λάβει μία από τις 4 τιμές: αριστερά, δεξιά, καμία και κληρονομιά. Αυτό δηλώνεται όπως φαίνεται στον παρακάτω κώδικα:
#sidebar (float: αριστερά; )
#πλευρική γραμμή ( float: αριστερά; |
Οι πιο συχνά χρησιμοποιούμενες τιμές είναι αριστερά και δεξιά. Η τιμή none ή η αρχική τιμή float για οποιοδήποτε στοιχείο σελίδας HTML είναι η προεπιλεγμένη τιμή. Η τιμή κληρονομιάς, η οποία μπορεί να εφαρμοστεί σχεδόν σε κάθε ιδιοκτησία CSS, δεν λειτουργεί σε εκδόσεις του Internet Explorer, συμπεριλαμβανομένης της 7.
Η ιδιότητα float δεν απαιτεί καμία άλλη ιδιότητα να εφαρμοστεί στο στοιχείο float, ωστόσο, για να λειτουργήσει σωστά, το float θα λειτουργεί πιο αποτελεσματικά υπό ορισμένες συνθήκες.
Συνήθως, ένα αιωρούμενο στοιχείο πρέπει να έχει ρητά καθορισμένο πλάτος(εκτός αν είναι αντικατασταθέν στοιχείο , όπως μια εικόνα). Αυτό διασφαλίζει ότι το float συμπεριφέρεται όπως αναμένεται και βοηθά στην αποφυγή προβλημάτων σε ορισμένα προγράμματα περιήγησης.
#sidebar ( float: αριστερά; πλάτος: 350 px; )
#πλευρική γραμμή ( float: αριστερά; πλάτος: 350 px; |
Χαρακτηριστικά αιωρούμενων στοιχείων
Ακολουθεί μια λίστα με τη συμπεριφορά των αιωρούμενων στοιχείων, σύμφωνα με την προδιαγραφή CSS2:
Ένα μπλοκ με αριστερό αιώρηση θα μετακινηθεί προς τα αριστερά έως ότου το αριστερό του άκρο (ή το όριο του άκρου εάν δεν υπάρχει άκρη) αγγίξει είτε την άκρη του περιεχομένου του μπλοκ είτε την άκρη ενός άλλου κυμαινόμενου μπλοκ
Εάν το μέγεθος ενός αιωρούμενου μπλοκ υπερβαίνει τον διαθέσιμο οριζόντιο χώρο, τότε το αιωρούμενο μπλοκ θα μετακινηθεί προς τα κάτω
Τα μη τοποθετημένα, μη αιωρούμενα στοιχεία μπλοκ λειτουργούν σαν αιωρούμενα στοιχεία, π.χ. βρίσκεται εκτός της ροής εγγράφων
Οι άκρες ενός αιωρούμενου μπλοκ δεν θα ταιριάζουν με τις άκρες των γειτονικών μπλοκ
Στοιχείο ρίζας( ) δεν μπορεί να μετακινηθεί
Ένα ενσωματωμένο στοιχείο, αυτό που επιπλέει, μετατρέπεται σε στοιχείο μπλοκ
Float στην πράξη
Η πιο συνηθισμένη περίπτωση χρήσης για την ιδιότητα float είναι η float μιας εικόνας με κείμενο που την αναδιπλώνει. Για παράδειγμα:
Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
Το CSS που εφαρμόζεται στην εικόνα στο παραπάνω πλαίσιο μοιάζει με αυτό:
img ( float: αριστερά, περιθώριο: 0 15px 5px 0, περίγραμμα: συμπαγές 1px #bbb; )
img ( float: αριστερά; περιθώριο : 0 15 px 5 px 0 ; περίγραμμα : συμπαγές 1px #bbb ; |
Η μόνη ιδιότητα που μπορεί να επιτύχει αυτό το αποτέλεσμα είναι η ιδιότητα float. Οι υπόλοιπες ιδιότητες (περιθώριο και περίγραμμα) υπάρχουν για αισθητικούς λόγους. Άλλα στοιχεία στο μπλοκ (ετικέτες
Με κείμενο σε αυτά) δεν χρειάζονται στυλ.
Όπως αναφέρθηκε προηγουμένως, τα αιωρούμενα στοιχεία ωθούνται έξω από τη ροή του εγγράφου και άλλα στοιχεία μπλοκ παραμένουν στη ροή, ενεργώντας σαν να μην ήταν καν το αιωρούμενο στοιχείο. Αυτό αποδεικνύεται οπτικά παρακάτω:
Αυτό το πλαίσιο επιπλέει αριστερά
Αυτό
Το στοιχείο έχει διαφορετικό χρώμα φόντου για να δείξει ότι εκτείνεται στο πλάτος του γονέα του, αγνοώντας το αιωρούμενο στοιχείο. Αυτό το ενσωματωμένο κείμενο, ωστόσο, τυλίγεται γύρω από το πλωτό πλαίσιο.
Στο παραπάνω παράδειγμα
στοιχείο σε επίπεδο μπλοκ, επομένως αγνοεί το αιωρούμενο στοιχείο που εκτείνεται σε όλο το πλάτος του κοντέινερ (μείον το padding). Όλα τα μη αιωρούμενα στοιχεία τύπου μπλοκ θα συμπεριφέρονται παρόμοια.
Το κείμενο σε μια παράγραφο είναι ενσωματωμένο, επομένως αναδιπλώνει το αιωρούμενο στοιχείο. Στο αιωρούμενο μπλοκ δίνονται επίσης επιλογές περιθωρίου για τη μετατόπισή του από την παράγραφο, καθιστώντας το οπτικά καθαρό έτσι ώστε το στοιχείο της παραγράφου να αγνοεί το αιωρούμενο μπλοκ.
Πλωτήρες καθαρισμού
Τα προβλήματα διάταξης με πλωτήρες συνήθως επιλύονται χρησιμοποιώντας Ιδιότητες CSSδιαφανές, το οποίο σας επιτρέπει να "αφαιρείτε" αιωρούμενα στοιχεία από την αριστερή ή τη δεξιά ή και τις δύο πλευρές.
Ας δούμε ένα παράδειγμα που εμφανίζεται συχνά - ένα υποσέλιδο που τυλίγεται γύρω από τη δεξιά πλευρά μιας διάταξης 2 κλώνων:
Η αριστερή στήλη κινήθηκε προς τα αριστερά
Αν κοιτάξετε τη σελίδα IE6 και IE7, δεν θα δείτε κανένα πρόβλημα. Η αριστερή και η δεξιά στήλη είναι στη θέση τους και το υποσέλιδο βρίσκεται στο κάτω μέρος. Αλλά σε Firefox, Opera, Safari και Chrome, θα δείτε ότι το υποσέλιδο μετακινείται από τη θέση του. Αυτό προκαλείται από την εφαρμογή float στις στήλες. Αυτή είναι σωστή συμπεριφορά, αν και είναι πιο προβληματική. Για να λύσουμε αυτό το πρόβλημα, χρησιμοποιούμε την παραπάνω καθαρή ιδιότητα, σε σχέση με το υποσέλιδο:
#footer ( σαφές: και τα δύο; )
#footer ( ξεκάθαρο: και τα δύο; |
Το αποτέλεσμα φαίνεται παρακάτω:
Η αριστερή στήλη κινήθηκε προς τα αριστερά
Η δεξιά στήλη κινήθηκε επίσης αριστερά
Η ιδιότητα διαγραφής θα διαγράψει μόνο τα αιωρούμενα στοιχεία, επομένως η εφαρμογή της διαγραφής: και στις δύο στήλες δεν θα προκαλέσει πτώση του υποσέλιδου, επειδή το υποσέλιδο δεν είναι αιωρούμενο στοιχείο.
Η ιδιότητα διαγραφής θα διαγράψει μόνο τα αιωρούμενα στοιχεία. Η χρήση του clear είναι η εξής: και οι δύο στήλες δεν θα παραλείψουν το υποσέλιδο επειδή δεν είναι ένα αιωρούμενο στοιχείο.
Επομένως, χρησιμοποιήστε το σαφές σε μη αιωρούμενα στοιχεία, ακόμη και μερικές φορές σε στοιχεία με κίνηση, για να αναγκάσετε τα στοιχεία σελίδας να καταλάβουν τις καθορισμένες θέσεις τους.
Διόρθωση γονικής εγκατάλειψης
Ένα από τα πιο κοινά χαρακτηριστικά της σήμανσης float είναι το "leave-parent". Αυτό αποδεικνύεται στο παρακάτω παράδειγμα:
Pellentesque κάτοικος morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Παρατηρήστε ότι η βάση της αιωρούμενης εικόνας εμφανίζεται έξω από το γονικό της. Το γονικό δεν έχει αναπτυχθεί πλήρως για να περιέχει μια κινούμενη εικόνα. Αυτό προκαλείται από αυτό που συζητήσαμε προηγουμένως: το αιωρούμενο στοιχείο βρίσκεται εκτός της φυσικής ροής του εγγράφου, αν και εμφανίζονται όλα τα στοιχεία του μπλοκ, αλλά το αιωρούμενο στοιχείο δεν υπάρχει. Αυτό δεν είναι σφάλμα CSS, όλα είναι σύμφωνα με τις προδιαγραφές CSS. Όλα τα προγράμματα περιήγησης κάνουν το ίδιο σε αυτό το παράδειγμα. Θα πρέπει να πούμε ότι, σε αυτό το παράδειγμα, η προσθήκη πλάτους κοντέινερ μπορεί να αποτρέψει το πρόβλημα στον IE, αλλά θα πρέπει επίσης να λύσει το πρόβλημα για Firefox, Opera, Safari ή Chrome.
Λύση 1: Πλωτήρας για δοχείο
Ο απλούστερος τρόπος για να λυθεί αυτό το πρόβλημα είναι να επιπλεύσει το γονικό στοιχείο:
Pellentesque κάτοικος morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Το δοχείο επεκτείνεται τώρα για να χωρέσει όλα τα θυγατρικά στοιχεία. Όμως, δυστυχώς, αυτή η επιδιόρθωση θα λειτουργήσει μόνο σε περιορισμένο αριθμό περιπτώσεων, καθώς ο αιωρούμενος γονέας μπορεί να έχει ανεπιθύμητες συνέπειες για τη διάταξή σας.
Λύση 2: Προσθήκη πρόσθετης σήμανσης
Αυτή είναι μια ξεπερασμένη μέθοδος, αλλά είναι μια απλή επιλογή. Απλώς προσθέστε ένα επιπλέον στοιχείο στον πάτο του δοχείου και «καθαρίστε» το. Έτσι θα μοιάζει ο κώδικας HTML μετά την εφαρμογή αυτής της μεθόδου:
XHTML
Pellentesque κάτοικος morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper.
Pellentesque κάτοικος morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. |
Και ως αποτέλεσμα, το CSS εφαρμόζεται στα νέα στοιχεία:
Clearfix (καθαρό: και τα δύο;)
Εκκαθάριση ( ξεκάθαρο: και τα δύο; |
Μπορείτε επίσης να το κάνετε αυτό μέσω
ετικέτα με το τρέχον στυλ. Είτε έτσι είτε αλλιώς, θα έχετε το επιθυμητό αποτέλεσμα: το γονικό κοντέινερ θα επεκταθεί για να συμπεριλάβει όλα τα παιδιά του. Αλλά αυτή η μέθοδος δεν συνιστάται επειδή προσθέτει μη σημασιολογικό κώδικα στη σήμανση.
Λύση 3: Το μετά ψευδοστοιχείο
Το ψευδοστοιχείο :after προσθέτει ένα στοιχείο στη σελίδα HTML που αποδίδεται. Αυτή η μέθοδος έχει χρησιμοποιηθεί αρκετά ευρέως για την επίλυση προβλημάτων float-clearing. Έτσι φαίνεται το CSS:
Clearfix:after ( περιεχόμενο: "."; εμφάνιση: block; ύψος: 0; clear: και τα δύο; ορατότητα: κρυφό; )
Clearfix:after ( περιεχόμενο : "." ; οθόνη: μπλοκ; ύψος: 0; ξεκάθαρο: και τα δύο; ορατότητα: κρυφό; |
Η κλάση CSS "clearfix" ισχύει για κάθε κοντέινερ που έχει float παιδιά και δεν επεκτείνεται για να τα συμπεριλάβει.
Αλλά αυτή η μέθοδος δεν λειτουργεί για τον Internet Explorer έως την έκδοση 7, επομένως για τον IE πρέπει να χρησιμοποιήσετε μία από τις ακόλουθες επιλογές:
Clearfix ( οθόνη: inline-block; ) .clearfix (zoom: 1; )
Εκκαθάριση ( οθόνη: inline-block; Εκκαθάριση ( ζουμ: 1; |
Ανάλογα με τον τύπο του προβλήματος, αντιμετωπίζετε μία από τις δύο λύσεις που θα επιλύσουν αυτό το ζήτημα στον Internet Explorer. Θα πρέπει να σημειωθεί ότι η ιδιότητα ζουμ δεν είναι τυπική ιδιότητα της Microsoft και επομένως το CSS σας θα καταστεί άκυρο.
Δεδομένου ότι το ψευδοστοιχείο :after δεν λειτουργεί στον IE6/7, ο κώδικας είναι λίγο φουσκωμένος και δύσκολος και απαιτείται πρόσθετο στυλ που δεν ισχύει μόνο για IE, επομένως αυτή η λύση δεν είναι ο καλύτερος τρόπος, αλλά είναι ίσως το καλύτερο που έχουμε δει ακόμα.
Λύση 4: Ιδιότητα υπερχείλισης
Ο μακράν ο καλύτερος και ευκολότερος τρόπος για να λύσετε το πρόβλημα γονικής εγκατάλειψης είναι να προσθέσετε υπερχείλιση: κρυφή ή υπερχείλιση: αυτόματη στο γονικό στοιχείο. Είναι σαφές, εύκολο στη συντήρηση, λειτουργεί σχεδόν σε όλα τα προγράμματα περιήγησης και δεν προσθέτει περιττή σήμανση.
Προσέξτε ότι είπα "σχεδόν" σε όλα τα προγράμματα περιήγησης. Αυτό συμβαίνει επειδή δεν λειτουργεί στον IE6. Ωστόσο, σε πολλές περιπτώσεις, το γονικό κοντέινερ θα έχει ένα καθορισμένο πλάτος, το οποίο διορθώνει το πρόβλημα στον IE6. Εάν το γονικό κοντέινερ δεν έχει πλάτος, μπορείτε να προσθέσετε ένα μονό στυλ IE6 με τον ακόλουθο κώδικα:
// Αυτή η επιδιόρθωση είναι μόνο για IE6 .clearfix (ύψος: 1%; υπερχείλιση: ορατή; )
// Αυτή η ενημέρωση κώδικα είναι μόνο για IE6 Εκκαθάριση ( ύψος: 1%; υπερχείλιση: ορατή; |
Στο IE6, η ιδιότητα ύψους αντιμετωπίζεται εσφαλμένα ως ελάχιστο ύψος, επομένως αυτό αναγκάζει το κοντέινερ να συμπεριλάβει τα παιδιά του. Στη συνέχεια, η ιδιότητα υπερχείλισης ορίζεται ξανά σε "ορατή" για να διασφαλιστεί ότι το περιεχόμενο δεν αποκρύπτεται ή δεν γίνεται κύλιση.
Το μόνο μειονέκτημα στη χρήση της μεθόδου υπερχείλισης (σε οποιοδήποτε πρόγραμμα περιήγησης) είναι η πιθανότητα το περιεχόμενο του στοιχείου να έχει γραμμές κύλισης ή απόκρυψη περιεχομένου. Εάν υπάρχουν στοιχεία με αρνητικά περιθώρια ή απόλυτη τοποθέτηση στο γονικό, θα κρυφτούν εάν εκτείνονται πέρα από το γονικό, επομένως αυτή η μέθοδος θα πρέπει να χρησιμοποιείται προσεκτικά. Θα πρέπει επίσης να σημειωθεί ότι εάν το περιεχόμενο στοιχείο είχε καθορισμένο ύψος ή ελάχιστο ύψος, τότε σίγουρα δεν θα μπορούσατε να χρησιμοποιήσετε τη μέθοδο υπερχείλισης.
Επομένως, δεν είναι πραγματικά εύκολο να λυθεί αυτό το πρόβλημα μέσω του προγράμματος περιήγησης. Αλλά σχεδόν οποιοδήποτε πρόβλημα καθαρισμού πλωτήρα μπορεί να λυθεί με μία από τις παραπάνω μεθόδους.
Σχετικά σφάλματα float στον Internet Explorer
Με τα χρόνια, έχουν δημοσιευτεί πολλά άρθρα στο διαδίκτυο που συζητούν συνηθισμένα σφάλματα που σχετίζονται με floats στη σήμανση CSS. Όλοι τους, δεν αποτελεί έκπληξη, αντιμετωπίζουν προβλήματα ειδικά για τον Internet Explorer. Παρακάτω, θα βρείτε μια λίστα με συνδέσμους προς έναν αριθμό άρθρων που συζητούν ζητήματα που σχετίζονται με τη διακίνηση:
Αλλαγή της ιδιότητας float χρησιμοποιώντας JavaScript
Για να αλλάξετε μια τιμή CSS στο JavaScript, πρέπει να αποκτήσετε πρόσβαση στο στυλ του αντικειμένου μετατρέποντας την προβλεπόμενη ιδιότητα CSS σε "Camel case". , και ούτω καθεξής. Αλλά με την ιδιότητα float, τα πράγματα είναι διαφορετικά επειδή η λέξη float είναι ήδη δεσμευμένη σε JavaScript. Επομένως τα ακόλουθα θα είναι λανθασμένα:
Στυλ. styleFloat = "αριστερά" ;
// Για όλα τα άλλα προγράμματα περιήγησης
myDiv. στυλ. cssFloat = "αριστερά" ;
Πρακτική χρήση του Float
Οι πλωτήρες μπορούν να χρησιμοποιηθούν για την επίλυση πολλών προβλημάτων στη σήμανση CSS. Ορισμένα παραδείγματα περιγράφονται εδώ.
2-στήλη, σταθερό πλάτος
3 στήλες, διάταξη ίσου ύψους
Κυμαινόμενη εικόνα με τίτλο.
Παρόμοια με αυτό που συζητήσαμε νωρίτερα στο Float in Practice, το Max Design περιγράφει πώς η αιωρούμενη εικόνα με έναν τίτλο επιτρέπει στο κείμενο να περιτυλίσσεται γύρω της φυσικά.
Οριζόντια πλοήγηση με μη ταξινομημένες λίστες
Η ιδιότητα float είναι ένα βασικό στοιχείο στην κωδικοποίηση οριζόντιων γραμμών πλοήγησης που βασίζονται σε sprite. Ο Chris Spooner της Line25 περιγράφει τη δημιουργία του Menu of Awesomeness, το οποίο κάνει ετικέτες
Για να δείξουμε τη σημασία της ιδιότητας float σε αυτό το παράδειγμα, ακολουθεί ένα στιγμιότυπο οθόνης της ίδιας εικόνας μετά τη χρήση του firebug για την αφαίρεση του float: αριστερά:
Γκαλερί φωτογραφιών με βάση το πλέγμα
Μια απλή χρήση της ιδιότητας float είναι να float:left μια σειρά φωτογραφιών που περιέχονται σε μια μη ταξινομημένη λίστα, η οποία παράγει το ίδιο αποτέλεσμα με αυτό που θα βλέπατε στη σήμανση πίνακα.
Η κύρια σελίδα προϊόντος του Καναδά (δείτε την παραπάνω εικόνα) εμφανίζει τα προϊόντα της σε μορφή πλέγματος δίπλα σε μια πλαϊνή γραμμή. Οι φωτογραφίες εμφανίζονται ως μια μη ταξινομημένη λίστα με μια ιδιότητα float, για όλους
Η σελίδα futons της Paragon Furniture (δείτε την παραπάνω εικόνα) είναι ένα άλλο παράδειγμα σελίδας προϊόντος που χρησιμοποιεί μια μη ταξινομημένη λίστα με μετακινούμενες ετικέτες
Η σελίδα αποτελεσμάτων αναζήτησης του iStockphoto (δείτε την παραπάνω εικόνα) έχει το ίδιο πλέγμα δομημένων φωτογραφιών, εδώ οι φωτογραφίες περιέχουν float:left
Ευθυγραμμία πεδία με ένα κουμπί
Η μοντελοποίηση προεπιλεγμένων στοιχείων φόρμας για διαφορετικά προγράμματα περιήγησης μπορεί να είναι προβληματική. Συχνά σε ένα πεδίο φόρμας, όπως μια φόρμα αναζήτησης, πρέπει να βάλετε στοιχείο δίπλα στο κουμπί «αποστολή».
Αφού με ρώτησαν για εξήντα όγδοη φορά γιατί ένα μπλοκ με float εμφανίζεται λανθασμένα, αποφάσισα να γράψω αυτή τη σημείωση, η οποία θα εξηγούσε τις τυπικές καταστάσεις που αντιμετωπίζει ένας αρχάριος σχεδιαστής διάταξης και επίσης για να παράσχω απλώς έναν σύνδεσμο σε αυτό άρθρο την επόμενη φορά.
Αποποίηση ευθυνών
Δεν είμαι επαγγελματίας σχεδιαστής layout, αν και λόγω της φύσης της δραστηριότητάς μου έπρεπε να σχεδιάσω περισσότερες από δώδεκα ιστοσελίδες. Έχω φίλους που μαθαίνουν layout και θέλω να τους βοηθήσω. Το πιθανότερο είναι να τα έχεις και εσύ. Ο σκοπός αυτού του άρθρου δεν είναι να πει κάτι νέο, αλλά να μιλήσει για το παλιό από την άποψη των πιο κοινών προβλημάτων που αντιμετωπίζουν οι αρχάριοι σχεδιαστές διάταξης. Δεν διεκδικώ την απόλυτη αλήθεια των λόγων μου και θα χαρώ μόνο αν με διορθώσετε και συμπληρώσετε.Ιδιότητες ενός στοιχείου με float που πρέπει να έχετε πάντα υπόψη σας
εάν έχει ρυθμιστεί αριστερά ή δεξιά- Το στοιχείο εμφανίζεται σαν μπλοκ, σαν να είχε την εμφάνιση ιδιοτήτων: μπλοκ;
- Στοιχείο το πλάτος συμπιέζεταιστο μέγεθος του περιεχομένου, εκτός εάν το πλάτος έχει οριστεί ρητά για το στοιχείο.
- Στοιχείο μπαστούνιαπρος την αριστερή (αριστερά) ή τη δεξιά άκρη (δεξιά).
- Ολα τα υπόλοιπαπεριεχόμενο σελίδας σε κώδικα HTML μετάστοιχείο με πλωτήρα, το τυλίγει?
Περιστατικό ζωής #1
Έχω δύο μπλοκ, εφάρμοσα float: δεξιά σε ένα από τα μπλοκ, ευθυγραμμίστηκε προς τα δεξιά, αλλά παρέμεινε κάτω από το πρώτο. Ένα παράδειγμα για το πώς φαίνεται.
Αιτία
Εάν συμβεί αυτό, σημαίνει ότι εφαρμόσατε το float όχι στο πρώτο, αλλά στο δεύτερο μπλοκ. Λόγω του γεγονότος ότι ένα αιωρούμενο (ένα με float) στοιχείο ρέει μόνο από εκείνα τα στοιχεία που εμφανίζονται στον κώδικα HTML μετάαυτό, το πρώτο μπλοκ δεν θα ρέει γύρω του.Επίσης, τα στοιχεία μπλοκ από προεπιλογή έχουν το μέγιστο δυνατό πλάτος (απόδειξη) εντός του γονέα. Το αιωρούμενο στοιχείο σας απλά δεν ταιριάζει με τα πρώτα στοιχεία μπλοκ μέγιστου πλάτους, επομένως πιέζεται προς τα κάτω.
Επίσης Ολαπεριεχόμενο ιστότοπου που έρχεται σε κώδικα HTML μετάαιωρούμενα στοιχεία ρέουν γύρω τους, γεγονός που συχνά οδηγεί σε ένα απροσδόκητο αποτέλεσμα.
Λύση
Λύση #1. Ρυθμίστε ρητά το ύψος του δοχείου. Σε περιπτώσεις που είναι γνωστό ποιες πρέπει να είναι οι διαστάσεις του δοχείου, αυτή είναι η απλούστερη λύση.Λύση #2. Προσθέστε ένα κενό μπλοκ με σαφή: και τα δύο . Η προσθήκη ενός τέτοιου στοιχείου αφαιρεί την «πλεύση» των μπλοκ και κάνει το δοχείο να τεντώνεται στο πλήρες ύψος του. Σημασιολογικά, αυτή δεν είναι η καλύτερη λύση, καθώς εισάγει ένα επιπλέον στοιχείο σήμανσης.
Λύση #3. Εφαρμόστε την ιδιότητα υπερχείλισης: αυτόματη (ή κρυφή) στο κοντέινερ. Αναγκάζει το κοντέινερ να υπολογίσει εκ νέου το ύψος και να το αλλάξει ώστε να περιλαμβάνει αιωρούμενα στοιχεία, διαφορετικά θα πρέπει να προσθέσει μια γραμμή κύλισης ή να τα αποκρύψει. Ωστόσο, αυτό συμβαίνει μερικές φορές, οπότε να είστε προσεκτικοί.
UPD
Διαβάστε επίσης από ως συνέχεια της συζήτησης για το ακίνητο float.
Ας δούμε τι συμβαίνει με τα στοιχεία όταν εφαρμόζεται η ιδιότητα float σε αυτά:
- Το στοιχείο "floats" και πιέζεται στο αριστερό (αν επιπλέει: αριστερά) ή δεξιά (float: δεξιά) άκρο του γονικού στοιχείου ή του στοιχείου που έχει επίσης ρυθμιστεί σε float
- Εάν ένα στοιχείο δεν μπορεί να χωρέσει σε μια σειρά με άλλο στοιχείο λόγω του πλάτους του γονικού μπλοκ, θα μετακινηθεί προς τα κάτω μέχρι να υπάρχει αρκετός χώρος για αυτό
- Άλλα στοιχεία μπλοκ για τα οποία δεν καθορίζεται το float συμπεριφέρονται σαν το στοιχείο με float να μην βρίσκεται στη σελίδα (το στοιχείο έχει επιπλεύσει). Οι γραμμές «γνωρίζουν» ότι το στοιχείο έχει επιπλεύσει και τυλίγονται γύρω του
- Το πλάτος ενός μπλοκ που έχει οριστεί ως float καθορίζεται από το περιεχόμενο.
Ας δούμε ένα παράδειγμα. Καταργήστε το σχόλιο του float: αριστερά ιδιότητα μέσα στο CSS. Δείτε το αποτέλεσμα.
Αντικαταστήστε το float:left με το float:right.
Η ιδιότητα float είναι χρήσιμη για να επιτρέπει στο κείμενο να αναδιπλώνεται γύρω από εικόνες. Εξετάστε ένα παράδειγμα:
Προσθέστε ένα σχόλιο στην ιδιότητα float: αριστερά στο αρχείο CSS. Δείτε πώς θα αλλάξει η διάταξη της σελίδας. Αντικαταστήστε το float: αριστερά με float: δεξιά.
"Σύμπτυξη" του γονικού στοιχείου όταν εμφανίζονται τα "παιδιά".
Αφήστε το στοιχείο δύο να τοποθετηθεί μέσα στο στοιχείο ένα. Από προεπιλογή, το ύψος 1 θα εκτείνεται σε όλο το περιεχόμενο. Μόλις εφαρμόσουμε την ιδιότητα float στο στοιχείο δύο, αυτό επιπλέει και το γονικό στοιχείο ένα δεν θα γνωρίζει ότι υπάρχουν δύο. Αν δύο δεν έχουν περιεχόμενο, τότε το ύψος τους είναι μηδέν. Αυτή η συμπεριφορά ονομάζεται «κατάρρευση». Για να αποτραπεί η κατάρρευση του γονέα, είτε του δίνεται η ιδιότητα min-height - το ελάχιστο ύψος, είτε χρησιμοποιείται μια μέθοδος: προστίθεται ένα άλλο μπλοκ, για το οποίο έχει οριστεί η ιδιότητα:
| 1 |
Αυτό το μπλοκ δεν είναι ορατό στη σελίδα, αλλά η ιδιότητα clear:both καταργεί την αναδίπλωση των στοιχείων και επεκτείνει το γονικό στοιχείο στο ύψος του περιεχομένου.
Καταργήστε το σχόλιο της ιδιότητας float:left στο CSS. Δείτε πώς συμπεριφέρεται το γονικό στοιχείο:
Εξετάστε ένα παράδειγμα χρησιμοποιώντας σαφή: και τα δύο
Έτσι έχετε εξοικειωθεί με τις βασικές ιδιότητες του float. Ας κάνουμε πράξη τις γνώσεις μας.
Εκτέλεση
Ασκηση 1.Προσθήκη τάξεων σε εικόνες. Στις κλάσεις, καθορίστε την ιδιότητα float:left. Μελετήστε πώς θα αλλάξει η έξοδος της σελίδας.
Όλα τα στοιχεία που εμφανίζονται σε μια σελίδα HTML δεν είναι τίποτα άλλο από ορθογώνια. Και βασικά μόνο δύο τύποι:
- μπλοκ (blok), τα οποία καταλαμβάνουν όλο το πλάτος όπου βρίσκονται, και διαχωρίζονται από ό,τι είναι πάνω και κάτω από αυτά. Για παράδειγμα, αυτές είναι ετικέτες DIV, P, H.
- ενσωματωμένο (ενσωματωμένο). Για παράδειγμα, SPAN, STRONG, EM, A και IMG.
τραπέζια.
Ο ρόλος της ιδιότητας αυξήθηκε μετά τη μετάβαση από τη διάταξη πίνακα στη διάταξη div. Αυτό συμβαίνει επειδή το float επιτρέπει σε έναν προγραμματιστή ιστού να περιλαμβάνει στήλες χωρίς να χρειάζεται να καταφύγει σε πίνακα. Μπορεί να πάρει αξίες σωστά, αριστερά, αλλά όχι κέντρο.
Προηγουμένως, η διάταξη σελίδας γινόταν χρησιμοποιώντας τραπέζια.
Ο ρόλος της ιδιότητας float αυξήθηκε μετά τη μετάβαση από τη διάταξη πίνακα στη διάταξη div. Αυτό συμβαίνει επειδή το float επιτρέπει σε έναν προγραμματιστή ιστού να περιλαμβάνει στήλες χωρίς να χρειάζεται να καταφύγει σε πίνακα. Μπορεί να πάρει αξίες σωστά, αριστερά, αλλά όχι κέντρο.
Χρήση της ιδιότητας εμφάνισης: block; ή οθόνη: inline; μετατρέπουμε έναν τύπο ορθογωνίου σε έναν άλλο. Για παράδειγμα, μια λίστα UL που έχει έναν αριθμό μπλοκ LI μπορεί να τοποθετηθεί οριζόντια:
- ΠΑΡΑΓΡΑΦΟΣ
- ΠΑΡΑΓΡΑΦΟΣ
- ΠΑΡΑΓΡΑΦΟΣ
- ΠΑΡΑΓΡΑΦΟΣ
- ΠΑΡΑΓΡΑΦΟΣ
- ΠΑΡΑΓΡΑΦΟΣ
Όταν χρησιμοποιείτε την ιδιότητα float, το ορθογώνιο έχει σχήμα μπλοκ, αλλά με ένα ιδιαίτερο χαρακτηριστικό: το πλάτος του δεν θα εκτείνεται σε ολόκληρο το περιεχόμενο. Για παράδειγμα, μια κεφαλίδα h3 μοιάζει με:
αυτό είναι το HEADER h3
Εάν ρυθμίσουμε την ιδιότητα display: inline, θα δούμε ότι έχει αλλάξει όχι μόνο το πλάτος, αλλά και η απόσταση πάνω και κάτω από το στοιχείο:αυτό είναι το HEADER h3
Αλλά αν θέλω να τοποθετήσω το στοιχείο στα δεξιά και να προσθέσω text-align:right αυτή τη φορά, τότε παίρνουμε:αυτό είναι το HEADER h3
Και είναι εντελώς διαφορετικό αν float: σωστά;. Λάβετε υπόψη ότι η απόσταση πάνω και κάτω από το στοιχείο παραμένει αμετάβλητη:αυτό είναι το HEADER h3
Πώς θα συμπεριφέρονται τα στοιχεία δίπλα στον τίτλο;Το επάνω κείμενο παραμένει αμετάβλητο επειδή ένα αιωρούμενο στοιχείο δεν μπορεί να τοποθετηθεί πάνω από τη γραμμή στην οποία δημιουργήθηκε.
αυτό είναι το HEADER h3
Αλλά το κόκκινο κείμενο βρίσκεται κάτω από τον τίτλο και θα τυλιχθεί γύρω του χωρίς να υπάρχουν πρόσθετα στυλ. Και μόνο το ύψος του h3 θα ξεπεραστεί, η σελίδα θα επιστρέψει στη φυσική της σειρά.
A B C D Αρκετά αιωρούμενα στοιχεία θα ακολουθήσουν την ακολουθία της θέσης τους. ΕΝΑσιΣΕσολκείμενο...
Και η ευθυγράμμιση γίνεται κατά μήκος της κάτω άκρης αυτών των γραμμάτων που βρίσκονται στην ίδια πλευρά.
A B C D Αν περπατήσουμε έτσι ώστε η ροή γύρω από το στοιχείο να σταματήσει από μια συγκεκριμένη στιγμή (από εδώ), εφαρμόζεται η καθαρή ιδιότητα. Μπορούμε να το προσθέσουμε σε μια κενή ετικέτα
Για να τοποθετήσουμε ομοιόμορφα πολλά ορθογώνια μπλοκ, τους δίνουμε το ίδιο πλάτος.
Η διάταξη σε πίνακα είναι πολύ βολική και κατανοητή, γι' αυτό και εμφανίστηκε η αναλογική της εμφάνιση: πίνακας. Η ίδια φόρμα λαμβάνεται με λιγότερο κωδικό.
Τώρα μπορείτε να δείτε πώς δημιουργείται η συλλογή εικόνων. Ελπίζω να μην το έχει ξεχάσει κανείς.
κείμενο...
κείμενο...
Σύνδεσμοι προς πηγές:
