Μάθετε περισσότερα για την ιδιοκτησία float. Πώς λειτουργούν οι ιδιότητες CSS float αριστερά και float δεξιά

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

Αποποίηση ευθυνών

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

Ιδιότητες ενός στοιχείου με float που πρέπει να έχετε πάντα υπόψη σας

εάν έχει ρυθμιστεί αριστερά ή δεξιά

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

Περιστατικό ζωής #1

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

Αιτία

Εάν συμβεί αυτό, σημαίνει ότι εφαρμόσατε το float όχι στο πρώτο, αλλά στο δεύτερο μπλοκ. Λόγω του γεγονότος ότι ένα αιωρούμενο (ένα με float) στοιχείο ρέει μόνο από εκείνα τα στοιχεία που εμφανίζονται στον κώδικα HTML μετάαυτό, το πρώτο μπλοκ δεν θα ρέει γύρω του.

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

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

Λύση

Λύση #1. Ρυθμίστε ρητά το ύψος του δοχείου. Σε περιπτώσεις που είναι γνωστό ποιες πρέπει να είναι οι διαστάσεις του δοχείου, αυτή είναι η απλούστερη λύση.

Λύση #2. Προσθέστε ένα κενό μπλοκ με σαφή: και τα δύο . Η προσθήκη ενός τέτοιου στοιχείου αφαιρεί την «πλεύση» των μπλοκ και κάνει το δοχείο να τεντώνεται στο πλήρες ύψος του. Σημασιολογικά, αυτή δεν είναι η καλύτερη λύση, καθώς εισάγει ένα επιπλέον στοιχείο σήμανσης.

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

UPD
Διαβάστε επίσης από ως συνέχεια της συζήτησης για το ακίνητο float.

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

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

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

Μπλοκ σε ένα κοντέινερ με σύνολο ιδιοτήτων CSS float αριστερά και float δεξιά

Τυπικό πρόβλημα:

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

Οι παρακάτω εικόνες δείχνουν μερικές τέτοιες περιπτώσεις.

Κατάσταση με δύο ή περισσότερα μπλοκ με CSS float αριστερά ιδιοκτησία

Θα έπρεπε να είναι:

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

Θα έπρεπε να είναι:

Πώς φαίνεται αν η διάταξη είναι λανθασμένη:

Γιατί συνέβη αυτή η κατάσταση;

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

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

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

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

Λύση 1 Προσθέστε ένα κενό μπλοκ με καθαρή την ιδιότητα CSS: και τα δύο

Πριν από την ετικέτα κοντέινερ κλεισίματος, πρέπει να τοποθετήσετε ένα μπλοκ με την ιδιότητα CSS clear:both. Στη συνέχεια, το κοντέινερ θα επεκταθεί στο κάτω μπλοκ, καθώς αυτή η ιδιότητα αποκλείει την επιρροή των μπλοκ με τις ιδιότητες float CSS αριστερά και float δεξιά.

Δείγμα κώδικα σελίδας:

Η γειτονιά Epsilon, ως γνωστόν, αντιστρέφει την αφηρημένη σειρά Taylor όπως ήταν αναμενόμενο.

Μπορείτε επίσης να τοποθετήσετε ένα μπλοκ με την ιδιότητα clear:both αμέσως μετά την ετικέτα κλεισίματος του κοντέινερ ή μετά το τελευταίο αιωρούμενο μπλοκ. Το δοχείο δεν θα αλλάξει το μέγεθός του σε αυτήν την κατάσταση. Και σε γενικές γραμμές, δεν θα χρειαστεί, αλλά ένα μπλοκ με το clear:και οι δύο ιδιότητες απλώς αποκόπτουν τα περιεχόμενα από τα αιωρούμενα μπλοκ.

Δείγμα κώδικα σελίδας:

Η γειτονιά Epsilon, ως γνωστόν, αντιστρέφει την αφηρημένη σειρά Taylor όπως ήταν αναμενόμενο.

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

Δείγμα κώδικα CSS:

Container ( display: block; ) .in_block ( display: block; float: αριστερά; πλάτος: 100px; ύψος: 100px; margin-right: 10px; ) .clear ( display: block !important; margin: 0px !important; padding: 0px !important;

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

Λύση 2: Προσδιορίστε ρητά το ύψος του δοχείου

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

Κοντέινερ ( οθόνη: μπλοκ; ύψος: 100 εικονοστοιχεία; ) .in_block ( οθόνη: μπλοκ; float: αριστερά; πλάτος: 100 εικονοστοιχεία; ύψος: 100 εικονοστοιχεία; περιθώριο δεξιά: 10 εικονοστοιχεία; )

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

Λύση 3: Ορίστε την ιδιότητα υπερχείλισης CSS στο κοντέινερ

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

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

Δείγμα κώδικα CSS:

Container ( display: block; overflow: auto; ) .in_block ( display: block; float: αριστερά; πλάτος: 100px; ύψος: 100px; margin-right: 10px; )

Δύο μπλοκ στο ίδιο επίπεδο με τις καθορισμένες ιδιότητες CSS επιπλέουν αριστερά και επιπλέουν δεξιά

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

Θα έπρεπε να είναι:

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

Τι είναι το "float";

ΦλοτέρΑυτή είναι μια ιδιότητα εντοπισμού θέσης CSS. Για να κατανοήσετε την ουσία και την προέλευσή του, πρέπει να δώσετε προσοχή στο τυπωμένο σχέδιο. Σε εκτυπωμένες διατάξεις, η εικόνα μπορεί να τοποθετηθεί έτσι ώστε το κείμενο να ρέει γύρω της. Αυτό συνήθως ονομάζεται " ΑΝΑΔΙΠΛΩΣΗ ΚΕΙΜΕΝΟΥ".

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

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

Ορισμός ιδιότητας φλοτέργια στοιχεία που χρησιμοποιούν CSS μοιάζει με αυτό:

#sidebar (float: δεξιά; )

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

Σε τι χρησιμεύει το float;

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

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

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

Επαναφορά αναδίπλωσης

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

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

#footer ( σαφές: και τα δύο; )

Ιδιοκτησία Σαφήέχει τέσσερις έννοιες. Και τα δυοχρησιμοποιείται για την ανακούφιση της ροής και προς τις δύο κατευθύνσεις. ΑριστεράΚαι σωστάχρησιμοποιούνται για επαναφορά μιας κατεύθυνσης - αριστερά ή δεξιά, αντίστοιχα. Κανένας- Προεπιλεγμένη τιμή. Κληρονομώθα μπορούσε να είναι η πέμπτη τιμή, αλλά παραδόξως δεν υποστηρίζεται Internet Explorer. Η επαναφορά μόνο της αριστερής ή δεξιάς ροής είναι αρκετά σπάνια, αλλά έχει πρακτικά οφέλη.

Μεγάλη κατάρρευση

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

Αλλά η εναλλακτική σε μια τέτοια κατάρρευση είναι ακόμη χειρότερη. Εξετάστε το ακόλουθο σενάριο:

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

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

Τεχνικές ακύρωσης περιτυλίγματος

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

Μέθοδος κενού μπλοκ.

Είναι κυριολεκτικά ένα άδειο μπλοκ.

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

Μέθοδος υπερχείλισης.

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

Εύκολη μέθοδος καθαρισμού.

Χρησιμοποιεί ψευδο-επιλογέα CSS (:after) για να αφαιρέσει το τύλιγμα. Αντί να χρησιμοποιήσετε το ακίνητο ξεχείλισμαΓια το γονικό στοιχείο, ορίστε μια πρόσθετη κλάση για αυτό, για παράδειγμα "clearfix" και χρησιμοποιήστε το ακόλουθο στυλ CSS:

Clearfix:after ( περιεχόμενο: "."; ορατότητα: κρυφό; εμφάνιση: μπλοκ; ύψος: 0; καθαρό: και τα δύο; )

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

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

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

Προβλήματα με αιωρούμενα στοιχεία

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

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

Γρήγορη λύση στο πρόβλημα: χρήση υπερχείλισης: κρυφό; για να κόψετε την περίσσεια.

Σφάλμα διπλού περιθωρίου- ένα άλλο πράγμα που πρέπει να θυμάστε όταν εργάζεστε με τον IE6. Αυτό το σφάλμα εκφράζεται στο γεγονός ότι εάν το πεδίο βρίσκεται στην ίδια πλευρά με το προσανατολισμό του φλοτέρ, το γήπεδο διπλασιάζεται. Για παράδειγμα:

Θα βάλουμε το αριστερό πεδίο 40 εικονοστοιχεία., αντί 20 εικονοστοιχεία.

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

3px Jog. Η ουσία αυτού του σφάλματος είναι ότι το κείμενο που βρίσκεται δίπλα στο αιωρούμενο στοιχείο μετατοπίζεται παράξενα κατά τρία εικονοστοιχεία, σαν να είναι υπό την επίδραση ενός πεδίου δύναμης που βρίσκεται γύρω από το αιωρούμενο στοιχείο. Γρήγορη λύση στο πρόβλημα: Ορίστε το πλάτος και το ύψος του επηρεαζόμενου κειμένου.

Εμφανίζεται στο IE7 Σφάλμα κάτω περιθωρίου, όταν το γονικό στοιχείο είναι αιωρούμενο στοιχείο και το παιδί του που βρίσκεται μέσα σε αυτό είναι επίσης αιωρούμενο στοιχείο. Το κάτω περιθώριο (περιθώριο-κάτω) του παιδιού αγνοείται από το προγονικό στοιχείο. Γρήγορη λύση στο πρόβλημα: Χρησιμοποιήστε padding-bottom στο γονικό στοιχείο αντί για margin-bottom στο θυγατρικό στοιχείο.

Πριν από μερικά χρόνια, όταν οι προγραμματιστές άρχισαν για πρώτη φορά να μεταβαίνουν στη σήμανση HTML χωρίς πίνακα, η ιδιότητα float CSS πήρε ξαφνικά έναν πολύ σημαντικό ρόλο. Ο λόγος που η ιδιότητα 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: Πλωτήρας για δοχείο

Ο απλούστερος τρόπος για να λυθεί αυτό το πρόβλημα είναι να επιπλεύσει το γονικό στοιχείο:

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

Λύση 2: Προσθήκη πρόσθετης σήμανσης

Αυτή είναι μια ξεπερασμένη μέθοδος, αλλά είναι μια απλή επιλογή. Απλώς προσθέστε ένα επιπλέον στοιχείο στον πάτο του δοχείου και «καθαρίστε» το. Έτσι θα μοιάζει ο κώδικας HTML μετά την εφαρμογή αυτής της μεθόδου:

XHTML

"//media.smashingmagazine.com/cdn_smash/wp-content/uploads/2009/10/lifesaver.jpg"πλάτος = "200" ύψος = "222" alt = "" />

Και ως αποτέλεσμα, το CSS εφαρμόζεται στα νέα στοιχεία:

Clearfix (καθαρό: και τα δύο;)

Εκκαθάριση (

ξεκάθαρο: και τα δύο;

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

Λύση 3: Το μετά ψευδοστοιχείο

Το ψευδοστοιχείο :after προσθέτει ένα στοιχείο στη σελίδα HTML που έχει αποδοθεί. Αυτή η μέθοδος έχει χρησιμοποιηθεί αρκετά ευρέως για την επίλυση προβλημάτων float-clearing. Έτσι φαίνεται το CSS:

Clearfix:after ( περιεχόμενο: "."; εμφάνιση: μπλοκ; ύψος: 0; καθαρό: και τα δύο; ορατότητα: κρυφό; )

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: αριστερά:

Για να δείξουμε τη σημασία της ιδιότητας float σε αυτό το παράδειγμα, ακολουθεί ένα στιγμιότυπο οθόνης της ίδιας εικόνας μετά τη χρήση του firebug για την αφαίρεση του float: αριστερά:

Γκαλερί φωτογραφιών με βάση το πλέγμα

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

Η κύρια σελίδα προϊόντος του Καναδά (δείτε την παραπάνω εικόνα) εμφανίζει τα προϊόντα της σε μορφή πλέγματος δίπλα σε μια πλαϊνή γραμμή. Οι φωτογραφίες εμφανίζονται ως μια μη ταξινομημένη λίστα με μια ιδιότητα float, για όλους

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

Η σελίδα futons της Paragon Furniture (δείτε την παραπάνω εικόνα) είναι ένα άλλο παράδειγμα σελίδας προϊόντος που χρησιμοποιεί μια μη ταξινομημένη λίστα με μετακινούμενες ετικέτες

Η σελίδα αποτελεσμάτων αναζήτησης του iStockphoto (δείτε την παραπάνω εικόνα) έχει το ίδιο πλέγμα δομημένων φωτογραφιών, εδώ οι φωτογραφίες περιέχουν float:left

ετικέτες, όχι

ετικέτες.

Ευθυγραμμία πεδία με ένα κουμπί

Η μοντελοποίηση προεπιλεγμένων στοιχείων φόρμας για διαφορετικά προγράμματα περιήγησης μπορεί να είναι προβληματική. Συχνά σε ένα πεδίο φόρμας, όπως μια φόρμα αναζήτησης, πρέπει να βάλετε στοιχείο δίπλα στο κουμπί «αποστολή».

Αποποίηση ευθυνών

Ιδιότητες ενός στοιχείου με float που πρέπει να έχετε πάντα υπόψη σας

εάν έχει ρυθμιστεί αριστερά ή δεξιά

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

Περιστατικό ζωής #1

Αιτία

Λύση

UPD
Διαβάστε επίσης από το SelenIT2 ως συνέχεια της συζήτησης της ιδιότητας float.