Κατανόηση του CSS Float

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

Σε ένα φύλλο στυλ, η ιδιότητα float CSS μοιάζει με αυτό:

.right {float: right; }}

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

Θα την εκχωρήσατε έτσι:

class = "right" />

Τι μπορείτε να επιπλέξετε με την ιδιότητα float CSS;

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

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

Πού φεύγουν;

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

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

Πόσο μακριά θα καταλήξουν;

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

• Εάν το επιπλωμένο στοιχείο δεν έχει προκαθορισμένο πλάτος, θα πάρει όσο το δυνατόν περισσότερο οριζόντιο χώρο όπως απαιτείται και είναι διαθέσιμο, ανεξάρτητα από το πλωτήρα. Σημείωση: μερικά προγράμματα περιήγησης προσπαθούν να τοποθετήσουν στοιχεία δίπλα σε επιπλεγμένα στοιχεία όταν το πλάτος δεν έχει καθοριστεί - συνήθως δίνουν στο μη πλωτό στοιχείο μόνο ένα μικρό χώρο. Έτσι πρέπει καθορίστε πάντα ένα πλάτος επί επιπλεόντων στοιχείων.
• Εάν το στοιχείο του δοχείου είναι το στοιχείο HTML, το floated DIV θα κάθεται στο αριστερό περιθώριο της σελίδας.
• Εάν το στοιχείο του περιέκτη περιέχεται από κάτι άλλο, το επιπλέει DIV θα κάθονται στο αριστερό περιθώριο του δοχείου.
• Μπορείτε να φωλιάσετε επιπλέουσες στοιχεία, και αυτό μπορεί να έχει ως αποτέλεσμα το πλωτήρα να καταλήγει σε μια εκπληκτική θέση. Για παράδειγμα, αυτό το float είναι ένα αριστερό επιπλέει DIV μέσα σε ένα δεξαμενόπλοιο δεξιά DIV.
• Τα κυμαινόμενα στοιχεία θα κάθονται το ένα δίπλα στο άλλο εάν υπάρχει χώρος στο δοχείο. Για παράδειγμα, αυτό το δοχείο έχει τρεις πλάτος 100px DIV στοιχεία που επιπλέουν σε ένα δοχείο πλάτους 400px.

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

Απενεργοποίηση του πλωτήρα

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

σαφής: αριστερά.σαφής: δεξιά?σαφής: και οι δύο?

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

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

Το HTML (επαναλάβετε αυτήν την παράγραφο):

Ο Duis aute irure dolor sed do eiusmod temporal incididunt για την αντιπαράθεση στο voluptate. Ο μη κυβερνητικός εκπρόσωπος, εκτός από τον εργαζόμενο και τον πάροχο της άλλης.

Το CSS (για να επιπλεύσετε τις εικόνες στα αριστερά):

img.float {float: αριστερά; σαφής: αριστερά. περιθώριο: 5px;}

Και προς τα δεξιά:

img.float {float: right; σαφής: δεξιά? περιθώριο: 5px;}

Χρησιμοποιώντας πλωτήρες για διάταξη

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

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

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