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

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

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

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

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

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

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

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

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

Αιτία

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

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

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

Λύση

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

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

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

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

Ας δούμε τι συμβαίνει με τα στοιχεία όταν εφαρμόζεται η ιδιότητα float σε αυτά:

Το στοιχείο "επιπλέει" και πιέζεται στην αριστερή (αν επιπλέει: αριστερά) ή στη δεξιά (float: δεξιά) άκρη του γονικού στοιχείου ή στοιχείου που έχει επίσης ρυθμιστεί να επιπλέει
Εάν ένα στοιχείο δεν μπορεί να χωρέσει σε μια σειρά με άλλο στοιχείο λόγω του πλάτους του γονικού μπλοκ, θα μετακινηθεί προς τα κάτω μέχρι να υπάρχει αρκετός χώρος για αυτό
Άλλα στοιχεία μπλοκ για τα οποία δεν καθορίζεται το float συμπεριφέρονται σαν το στοιχείο με float να μην βρίσκεται στη σελίδα (το στοιχείο έχει επιπλεύσει). Οι γραμμές «γνωρίζουν» ότι το στοιχείο έχει επιπλεύσει και τυλίγονται γύρω του
Το πλάτος ενός μπλοκ που έχει οριστεί ως float καθορίζεται από το περιεχόμενο.

Ας δούμε ένα παράδειγμα. Καταργήστε το σχόλιο του float: αριστερά ιδιότητα μέσα στο CSS. Δείτε το αποτέλεσμα.

Αντικαταστήστε το float:left με το float:right.

Η ιδιότητα float είναι χρήσιμη για να επιτρέπει στο κείμενο να αναδιπλώνεται γύρω από εικόνες. Εξετάστε ένα παράδειγμα:

Προσθέστε ένα σχόλιο στην ιδιότητα float: αριστερά στο αρχείο CSS. Δείτε πώς θα αλλάξει η διάταξη της σελίδας. Αντικαταστήστε το float: αριστερά με float: δεξιά.

"Σύμπτυξη" του γονικού στοιχείου όταν εμφανίζονται τα "παιδιά".

Αφήστε το στοιχείο δύο να τοποθετηθεί μέσα στο στοιχείο ένα. Από προεπιλογή, το ύψος 1 θα εκτείνεται σε όλο το περιεχόμενο. Μόλις εφαρμόσουμε την ιδιότητα float στο στοιχείο δύο, αυτό επιπλέει και το γονικό στοιχείο ένα δεν θα γνωρίζει ότι υπάρχουν δύο. Αν δύο δεν έχουν περιεχόμενο, τότε το ύψος τους είναι μηδέν. Αυτή η συμπεριφορά ονομάζεται «κατάρρευση». Για να αποτραπεί η κατάρρευση του γονέα, είτε του δίνεται η ιδιότητα min-height - το ελάχιστο ύψος, είτε χρησιμοποιείται μια μέθοδος: προστίθεται ένα άλλο μπλοκ, για το οποίο έχει οριστεί η ιδιότητα:

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

Καταργήστε το σχόλιο της ιδιότητας float:left στο CSS. Δείτε πώς συμπεριφέρεται το γονικό στοιχείο:

Εξετάστε ένα παράδειγμα χρησιμοποιώντας σαφή: και τα δύο

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

Εκτέλεση

Ασκηση 1.Προσθήκη τάξεων σε εικόνες. Στις κλάσεις, καθορίστε την ιδιότητα float:left. Μελετήστε πώς θα αλλάξει η έξοδος της σελίδας.

Μορφοποίηση κλιμακωτών πινάκων). Αυτή η γλώσσα υπάρχει από το 1996 και εξακολουθεί να εξελίσσεται. Προς το παρόν, οι προγραμματιστές χρησιμοποιούν ήδη την τρίτη έκδοση του CSS. Χρησιμοποιώντας τη γλώσσα προγραμματισμού CSS, είναι δυνατό να δημιουργήσετε έναν εντελώς όμορφο και ευχάριστο ιστότοπο που δεν θα φαίνεται ξεπερασμένος ή άβολος για τον χρήστη, ακόμα κι αν δεν χρησιμοποιείτε καθόλου JavaScript. Οι σύγχρονες δυνατότητες της τρίτης έκδοσης σας επιτρέπουν να το κάνετε αυτό.

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

CSS Float - γιατί χρειάζεται;

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

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

Περιγραφή ακινήτου CSS Float

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

Η ιδιότητα Float έχει τέσσερις τιμές:

Float:inherit;
Float:δεξιά;
float:αριστερά;
Float:κανένα;

Για όσους γνωρίζουν αγγλικά, οι τιμές των παραμέτρων της ιδιότητας Float θα πρέπει να είναι σαφείς. Αλλά για όσους δεν γνωρίζουν, εδώ είναι μια μικρή εξήγηση. Παράμετρος :αριστερά;Μετακινεί το σώμα του στοιχείου στην αριστερή άκρη του γονικού στοιχείου. Το ίδιο συμβαίνει (μόνο προς την άλλη κατεύθυνση) με την παράμετρο bcgjkmpjdfybb :σωστά;. Εννοια :κληρονομώ;λέει στο στοιχείο να λάβει τις ίδιες ρυθμίσεις με το γονικό του. Τέτοια στοιχεία ονομάζονται επίσης θυγατρικά στοιχεία, καθώς βρίσκονται απευθείας μέσα στον γονέα στον κώδικα html. Ένα ακίνητο :κανένας;επιτρέπει στο στοιχείο να μην διακόπτει την κανονική ροή του εγγράφου, έχει οριστεί από προεπιλογή για όλα τα μέρη του κώδικα.

Πώς λειτουργεί το Float;

Η ιδιότητα Float CSS λειτουργεί πολύ απλά. Όλα όσα περιγράφηκαν παραπάνω μπορούν να γίνουν χωρίς μεγάλη δυσκολία. Τότε όλα θα είναι εξίσου απλά. Αλλά πριν συνεχίσουμε τη μελέτη της ιδιότητας Float, αξίζει να κατανοήσουμε μια μικρή θεωρία. Κάθε στοιχείο ενός ιστότοπου είναι ένα μπλοκ. Μπορείτε να το επαληθεύσετε εύκολα ανοίγοντας την κονσόλα στο Google Chrome πατώντας Ctrl + Shift + J. Το κείμενο, ο τίτλος, η εικόνα, οι σύνδεσμοι και όλα τα άλλα στοιχεία του ιστότοπου θα εμφανίζονται σε μπλοκ, μόνο σε διαφορετικά μεγέθη. Αρχικά, όλα αυτά τα μπλοκ έρχονται το ένα μετά το άλλο. Όπως μπορείτε να δείτε στο παρακάτω παράδειγμα, οι γραμμές κώδικα διαδέχονται η μία την άλλη, επομένως θα εμφανίζονται αυστηρά η μία μετά την άλλη.

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

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

Καθαρή λειτουργία για επίλυση προβλημάτων

Η λειτουργία Float έχει έναν αγαπημένο φίλο - Clear. Μαζί - Και οι δύο αυτές λειτουργίες αλληλοσυμπληρώνονται και κάνουν τον προγραμματιστή χαρούμενο. Όπως αναφέρθηκε παραπάνω, τα γειτονικά στοιχεία ξεφεύγουν από την κανονική τους ροή και αρχίζουν επίσης να "επιπλέουν", όπως ακριβώς σε ένα στοιχείο που έχει την ιδιότητα Float (για παράδειγμα, CSS Float Top). Ως αποτέλεσμα, αντί για ένα αιωρούμενο στοιχείο, παίρνετε δύο, και καθόλου στο σημείο όπου ο προγραμματιστής σκόπευε να τα τοποθετήσει. Από αυτή τη στιγμή αρχίζουν όλα τα προβλήματα.

Η συνάρτηση Clear έχει πέντε τιμές:

:αριστερά;
:σωστά;
:και τα δυο;
:κληρονομώ;
κανένας;

Κατ' αναλογία, μπορείτε να καταλάβετε πότε είναι καλύτερο να χρησιμοποιήσετε τη λειτουργία Clear. Αν έχουμε μια γραμμή στον κώδικα Float:δεξιά;(εννοείται ο κωδικός CSS), τότε η συνάρτηση θα πρέπει να είναι Καθαρό: σωστά;. Το ίδιο ισχύει και για τα ακίνητα float:αριστερά;θα το συμπληρώσει Διαγραφή:αριστερά;. Όταν γράφετε κώδικα Καθαρό:και τα δύο;Αποδεικνύεται ότι το στοιχείο στο οποίο εφαρμόζεται αυτή η συνάρτηση θα βρίσκεται κάτω από τα στοιχεία στα οποία εφαρμόζεται η συνάρτηση Float. Το inherit παίρνει ρυθμίσεις από το γονικό στοιχείο και κανένα δεν κάνει αλλαγές στη δομή του ιστότοπου. Κατανοώντας πώς λειτουργούν οι λειτουργίες Float και Clear, μπορείτε να γράψετε μοναδικό και ασυνήθιστο κώδικα HTML και CSS Float που θα κάνει τον ιστότοπό σας μοναδικό στο είδος του.

Χρήση του Float για τη δημιουργία στηλών

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

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

Στη συνέχεια, στον κώδικα υπάρχουν #content και #navigation. Η συνάρτηση Float εφαρμόζεται σε αυτά τα στοιχεία. Το #content πηγαίνει αριστερά και η #πλοήγηση στα δεξιά. Αυτό είναι απαραίτητο για τη δημιουργία μιας τοποθεσίας δύο στηλών. Είναι απαραίτητο να καθορίσετε το πλάτος έτσι ώστε τα αντικείμενα να μην επικαλύπτονται μεταξύ τους. Το πλάτος μπορεί επίσης να καθοριστεί ως ποσοστό. Αυτό είναι ακόμα πιο βολικό από ό,τι στα pixel. Για παράδειγμα, 45% για #content και 45% για #navigation και δώστε το υπόλοιπο 10% στην ιδιότητα margin.

Η ιδιότητα Clear, η οποία βρίσκεται στο #footer, εμποδίζει το υποσέλιδο να ακολουθεί την #πλοήγηση και το #content, αλλά το αφήνει στο ίδιο σημείο όπου βρισκόταν. Τι μπορεί να συμβεί; αν δεν προσδιορίσετε την ιδιότητα Εκκαθάριση; Σε αυτόν τον κωδικό, το #footer απλώς θα ανέβει και θα καταλήξει στην περιοχή #navigation. Αυτό θα συμβεί επειδή το #navigation έχει αρκετό χώρο για να φιλοξενήσει ένα ακόμη στοιχείο. Αυτό το οπτικό παράδειγμα δείχνει ξεκάθαρα πώς οι ιδιότητες Clear και Float αλληλοσυμπληρώνονται.

Προβλήματα που μπορεί να αντιμετωπίσετε κατά τη σύνταξη κώδικα

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

Σύγκρουση στοιχείων

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

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

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

χρησιμοποιώντας τη συνάρτηση Θέση.
χρησιμοποιώντας το Flexbox.

Η συνάρτηση Position είναι μερικές φορές μια καλή εναλλακτική του CSS Float. Όταν χρησιμοποιείτε το Position, είναι καλύτερο να τοποθετείτε εικόνες στο κέντρο της ιστοσελίδας. Εάν εφαρμόσετε σωστά τις τιμές:absolute και:relative, τα στοιχεία θα μπουν στη θέση τους και δεν θα επικαλύπτονται μεταξύ τους.

Ανάλυση του κώδικα συνάρτησης θέσης και πλωτήρα

Αξίζει να ρίξουμε μια πιο προσεκτική ματιά στον τρόπο αντικατάστασης του Float με το Position σε κώδικα HTML και CSS. Στην πραγματικότητα είναι πολύ απλό. Ας υποθέσουμε ότι υπάρχει ένα #container και ένα #div στοιχείο.

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

Πώς μπορείτε λοιπόν να αλλάξετε τον κώδικα CSS και Float για να χρησιμοποιήσετε το Postion; Πολύ απλό:

θέση:συγγενής;

Σε αυτήν την περίπτωση, το #container και το #div θα λάβουν τη θέση που χρειάζεται ο προγραμματιστής στο γονικό στοιχείο. Κύριος? τοποθετήστε #div και #container σε ένα γονικό στοιχείο που θα ταιριάζει με τα μεγέθη τους.

Flexbox - πώς θα βοηθήσει αυτή η δυνατότητα να αντικαταστήσει το CSS Float;

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

Το Flexbox δεν είναι μια ιδιότητα, αλλά μια ξεχωριστή ενότητα. Επομένως, το flexbox υποστηρίζει έναν αριθμό ιδιοτήτων που λειτουργούν μόνο με αυτό. Επιπλέον, η λειτουργία εμφάνισης, η οποία έχει τρεις παραμέτρους inline, block και inline-block στο flexbox, έχει μόνο μία flex-flow.

Πώς λειτουργεί το Flexbox;

Αυτή η τεχνολογία θα βοηθήσει τον προγραμματιστή να ευθυγραμμίσει εύκολα τα στοιχεία οριζόντια και κάθετα. Το Flexbox μπορεί επίσης να αλλάξει την κατεύθυνση και τη σειρά με την οποία εμφανίζονται τα στοιχεία. Αυτή η τεχνολογία έχει δύο άξονες: τον κύριο άξονα και τον άξονα Cross, γύρω από τον οποίο είναι χτισμένο ολόκληρο το Flexbox. Καταργεί επίσης το εφέ των λειτουργιών Float και Clear. Χτίζει το σύστημά του σε κώδικα, στον οποίο χρησιμοποιεί ιδιότητες μοναδικές για αυτό, επομένως, δυστυχώς, δεν θα είναι δυνατό να αντιγράψει άλλες ιδιότητες, όπως Float και Position, σε στοιχεία. Και αυτό θα ήταν πολύ χρήσιμο, γιατί, όπως αναφέρθηκε παραπάνω, το Flexbox λειτουργεί μόνο σε νέες εκδόσεις προγραμμάτων περιήγησης.

Αξίζει να θυμάστε ότι στο τέλος, το Position, το Flexbox και το Float κάνουν το ίδιο πράγμα - δημιουργήστε ένα ασυνήθιστο και πρωτότυπο σχέδιο για τον ιστότοπό σας. Κάθε επιλογή που συζητείται στο άρθρο το κάνει αυτό με τον δικό της τρόπο και επομένως έχει τόσο πλεονεκτήματα όσο και μειονεκτήματα. Επιπλέον, συμβαίνει κάπου η λειτουργία Float να είναι τέλεια (για παράδειγμα, σε έναν ιστότοπο με απλή δομή), αλλά κάπου είναι καλύτερο να χρησιμοποιήσετε το Position ή το Flexbox.

Σφάλμα διπλού περιθωρίου

Ωστόσο, μερικές φορές, δυστυχώς, κάθε προγραμματιστής έχει προβλήματα που δεν σχετίζονται με τον γραπτό κώδικα, αλλά με σφάλματα σε έναν συγκεκριμένο τύπο προγράμματος περιήγησης. Για παράδειγμα, υπάρχει ένα σφάλμα στον Internet Explorer που ονομάζεται σφάλμα διπλού περιθωρίου. Πολλαπλασιάζει την παράμετρο Margin επί δύο, γεγονός που οδηγεί σε μετατόπιση των στοιχείων του ιστότοπου πέρα από τα όρια του προγράμματος περιήγησης. Για να αποφύγετε αυτό, απλώς καθορίστε την παράμετρο Margin ως ποσοστό. Συνήθως αυτό το σφάλμα παρουσιάζεται όταν ταιριάζουν οι τιμές των ιδιοτήτων Margin και Float.

margin-left:10px;

Αυτός ο κώδικας θα μετακινήσει το στοιχείο στον Internet Explorer 20 px προς τα αριστερά. Μπορείτε να αλλάξετε τον κωδικό ως εξής:

περιθώριο-αριστερά:10%;

ή έτσι,

margin-right:10px;

Και οι δύο αυτές επιλογές θα λύσουν το πρόβλημα της μετατόπισης στοιχείων.

Σφάλματα προγράμματος περιήγησης και εσφαλμένη εμφάνιση του ιστότοπου

Αξίζει να θυμηθούμε ότι ο Internet Explorer δεν είναι το μόνο πρόγραμμα περιήγησης στο οποίο μπορούν να προκύψουν σφάλματα. Οι παλαιότερες εκδόσεις του Google Chrome και του Mozilla εμφανίζουν επίσης εσφαλμένα ορισμένα στοιχεία των σύγχρονων ιστότοπων. Για καθένα από αυτά τα σφάλματα, μπορεί να βρεθεί μια λύση. Γενικά, θα ήθελα να σημειώσω ότι η χρήση του Float θα δημιουργήσει έναν πρωτότυπο και ελκυστικό σχεδιασμό ιστότοπου. Η κατανόηση των βασικών και των αρχών λειτουργίας αυτής της ιδιοκτησίας θα σας βοηθήσει να αποφύγετε λάθη και να κάνετε τη ζωή πιο εύκολη για κάθε προγραμματιστή.

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

Τι είναι το "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 στο θυγατρικό στοιχείο.

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

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

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

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

Πώς να δημιουργήσετε αιωρούμενα στοιχεία στο CSS χρησιμοποιώντας float

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

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

Τα δεδομένα για οποιαδήποτε ιδιότητα CSS (ιδιότητα) και οι τιμές της μπορούν να συλλεχθούν από τη σελίδα προδιαγραφών του W3C, όπου παρέχονται πλήρεις πληροφορίες (δεδομένα για τη δεύτερη έκδοση των φύλλων στυλ, αλλά αυτό ισχύει και για το CSS3, το οποίο είναι ήδη επίσημα στο δύναμη, αν και δεν έχει αναπτυχθεί πλήρως):

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

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

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

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

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

Ενσωματωμένο στοιχείο 1 Ενσωματωμένο στοιχείο 2

Στοιχείο μπλοκ

Η εικόνα που θα προκύψει θα είναι η εξής:

Όπως μπορείτε να δείτε, λάβαμε πρακτική επιβεβαίωση ότι το καθορισμένο ύψος (ύψος:50px) και το πλάτος (πλάτος:450px) δεν λειτουργούν υπό κανονικές συνθήκες για την ετικέτα SPAN, η οποία είναι ενσωματωμένη. Στη συνέχεια, ας προσπαθήσουμε να ορίσουμε την ιδιότητα float right για το πρώτο ενσωματωμένο στοιχείο web και την ιδιότητα float left για το δεύτερο:

Ενσωματωμένο στοιχείο 1 Ενσωματωμένο στοιχείο 2

Στοιχείο μπλοκ

Ως αποτέλεσμα παίρνουμε:

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

Επιπλέον, τα στοιχεία web που ορίζονται από την ενσωματωμένη ετικέτα SPAN αλληλεπιδρούν διαφορετικά με το παρακείμενο κοντέινερ DIV. Εάν αφαιρέσουμε περαιτέρω, ας πούμε, το χαρακτηριστικό width από τα στυλ και των δύο ετικετών SPAN, τότε το πλάτος τους θα καθοριστεί από το περιεχόμενο (στην περίπτωσή μας, το μήκος του κειμένου με τα ονόματα των στοιχείων):

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

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

Το στοιχείο μετατοπίζεται στην αριστερή ή τη δεξιά άκρη.
Γίνεται μπλοκαρισμένο ανεξάρτητα από το τι ήταν πριν.
Συμπεριφέρεται σαν να μην υπάρχουν γειτονικά στοιχεία web block (με τον κανόνα display:block). Μπορείτε να το επαληθεύσετε αν ρίξετε μια άλλη ματιά στα στιγμιότυπα οθόνης αυτής της ενότητας του άρθρου.
Ταυτόχρονα, οι ενσωματωμένες ετικέτες (display:inline) θα τυλίγονται γύρω από αιωρούμενα μπλοκ. Αν κοιτάξετε ξανά το προηγούμενο στιγμιότυπο οθόνης, θα παρατηρήσετε ότι τα περιεχόμενα του κοντέινερ DIV ("Στοιχείο αποκλεισμού") τυλίγονται γύρω από το SPAN με το float:αριστερά στα δεξιά.
Εάν δεν καθορίσετε ρητά το πλάτος του αιωρούμενου μπλοκ (στο παράδειγμά μας, width:450px), τότε θα καθοριστεί από το περιεχόμενό του.

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

Πώς να δημιουργήσετε ένα οριζόντιο μενού χρησιμοποιώντας CSS (float)

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

Παράγραφος 1
Σημείο 2
Σημείο 3
Σημείο 4
Σημείο 5

Παίρνουμε κάτι σαν αυτό:

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

Θα ήταν επίσης καλή ιδέα να ορίσετε ένα περιθώριο για να βελτιώσετε περαιτέρω τη σχεδίαση απομακρύνοντας ελαφρώς τα στοιχεία του μενού το ένα από το άλλο. Για ιστοσελίδες ενός ιστότοπου WordPress, μπορείτε να ορίσετε την ετικέτα UL "μενού", για την οποία ορίζετε τα απαραίτητα στυλ στο αρχείο STYLE.CSS:

Μενού (στυλ λίστας: κανένα; περιθώριο: 0; πλήρωση: 15 εικονοστοιχεία;) .menu li a(display:block;padding:10px;background:#EFCDB8;) .menu li(περιθώριο:10px;)

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

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

Μενού li(περιθώριο:10px;float:αριστερά;)

Ως αποτέλεσμα, το μενού θα μετατραπεί σε οριζόντια έκδοση:

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

Το "Item 2" μετακινήθηκε επίσης προς τα αριστερά, αλλά η περαιτέρω μετακίνησή του εμποδίστηκε από το πρώτο στοιχείο web του μενού. Και ούτω καθεξής. Ως αποτέλεσμα, λάβαμε μια οριζόντια διαδοχική αλυσίδα όλων των στοιχείων του μενού. Μπορείτε να δείτε όλες τις λεπτομέρειες μόνοι σας. Τώρα ας προσπαθήσουμε να μειώσουμε τεχνητά το πλάτος της θύρας προβολής:

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

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

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

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

Αποτέλεσμα εφαρμογής της καθαρής (και τα δύο, αριστερά, δεξιά) ιδιότητα

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

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

Η ουσία αυτού του κανόνα, που γράφτηκε για ένα συγκεκριμένο μπλοκ, είναι να ακυρώσει μια ενέργεια ανάλογα με την αξία της:

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

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

Ας πάρουμε λοιπόν δύο δοχεία DIV, τα οποία σχηματικά μπορούν να αντιπροσωπεύουν 2 στήλες. Ας γράψουμε ιδιότητες CSS για αυτούς, συμπεριλαμβανομένων σταθερό πλάτος(πλάτος), χρώμα φόντου και μετατροπή τους σε πλωτήρες χρησιμοποιώντας float αριστερά. Ας προσθέσουμε κείμενο σε αυτά, που περικλείεται στην ετικέτα P, η οποία, όπως γνωρίζετε, είναι πεζά:

Αριστερή στήλη

Δεξιά στήλη

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

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

Και πάλι, μπορείτε να δείτε μόνοι σας πώς συμπεριφέρονται όλα τα στοιχεία, περιορίζοντας τεχνητά και επεκτείνοντας την περιοχή θέασης. Για να εξαλείψουμε τις περιγραφόμενες ελλείψεις, θα προσθέσουμε ένα κοντέινερ με ιδιότητες CSS και θα τοποθετήσουμε όλα τα υπάρχοντα επίπεδα μέσα σε αυτό. Θα προσθέσουμε επίσης ένα επιπλέον κενό DIV με τον κανόνα CSS clear και των δύο για να αποτρέψουμε τη ροή του περιεχομένου του κάτω μπλοκ (κείμενο) γύρω από τις στήλες δεξιά και αριστερά:

Αριστερή στήλη

Δεξιά στήλη

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

Τώρα το πρόβλημά μας έχει λυθεί, αφού το αποτέλεσμα πληροί τις καθορισμένες συνθήκες: δύο στήλες βρίσκονται σε μια οριζόντια σειρά και το περιεχόμενο του στοιχείου web κάτω από τον κώδικα (TEXT) θα παραμείνει σταθερά στη σωστή θέση κάτω από τις στήλες.

Εάν το πλάτος της περιοχής προβολής μειωθεί, η σχεδίαση θα παραμείνει στην αρχική της μορφή (θα συμβεί οριζόντια κύλιση), την οποία μπορείτε να επαληθεύσετε μεταβαίνοντας στην αντίστοιχη ιστοσελίδα με τη λύση σε αυτό το παράδειγμα. Ως προσθήκη, παρακολουθήστε το βίντεο από τον Evgeny Popov, το οποίο δίνει ένα παράδειγμα σήμανσης ιστοσελίδας με χρήση float and clear (εκκαθάριση της ροής):