Τα πτητικά CSS εξηγούνται σε 5 ερωτήσεις

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

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

1. Ποια στοιχεία δεν επιπλέουν?
2. Τι συμβαίνει με ένα στοιχείο όταν επιπλέει?
3. Τι συμβαίνει με τα αδέλφια του "Floats"?
4. Τι συμβαίνει με έναν γονέα ενός "Float"?
5. Πώς διαγράφετε τα "Πλωτά"?

Για τους αναγνώστες που προσθέτουν την προσέγγιση του TL στη ζωή, υπάρχει περίληψη κοντά στο τέλος της θέσης.

1. Ποια στοιχεία δεν επιπλέουν?

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

2. Τι συμβαίνει με ένα στοιχείο όταν επιπλέει?

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

Πλωτά στοιχεία επίσης δεν θα πάει πάνω από τα στοιχεία πριν το στον κώδικα, κάτι που πρέπει να εξετάσετε πριν από την κωδικοποίηση ενός “Φλοτέρ” μετά ένα στοιχείο στην πλευρά του οποίου θέλετε να το επιπλέει.

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

(1) Ένα στοιχείο γραμμής θα μετατραπεί σε ένα στοιχείο σε επίπεδο μπλοκ όταν επιπλέει.

Αναρωτηθήκατε ποτέ γιατί ξαφνικά είστε σε θέση να καθορίσετε το ύψος και το πλάτος σε ένα πλωτό σπιθαμή? Αυτό συμβαίνει επειδή όλα τα στοιχεία που έχουν επιπλεύσει θα πάρουν την αξία ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ για την απεικόνιση Χαρακτηριστικό (inline-πίνακα θα πάρει τραπέζι) καθιστώντας τα στοιχεία μπλοκαρίσματος.

(2) Ένα στοιχείο μπλοκ απροσδιόριστου πλάτους θα συρρικνωθεί για να ταιριάζει στο περιεχόμενό του όταν επιπλέει.

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

3. Τι συμβαίνει με τα αδέρφια των "πλωτών"?

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

Οι "πλωτήρες" έχουν τα πιο φροντισμένα και υπάκουα αργότερα αδέλφια σε ολόκληρο τον κόσμο. Θα κάνουν ό, τι είναι στην εξουσία τους για να φιλοξενήσουν ένα επιπλέον στοιχείο.

ο κείμενο και στοιχεία γραμμής απλά να κάνουν δρόμο για τους "πλωτήρες" και θα περιβάλλουν το "Float" όταν είναι σε θέση.

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

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

Τώρα, ας πιάσουμε το μπλε κουτί και δούμε τι συμβαίνει με το κόκκινο κουτί και τα παιδιά του.

Όλα θα είναι ωραία όταν το κόκκινο κουτί σταματήσει να αγκαλιάζει το μπλε κουτί και γι 'αυτό μπορείτε να το χρησιμοποιήσετε υπερχείλιση: κρυφό.

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

4. Τι συμβαίνει με έναν γονέα ενός "Float"?

Οι γονείς δεν ενδιαφέρονται πολύ για τα παιδιά τους "Float", εκτός από το ότι δεν πρέπει να βγαίνουν από το αριστερό ή το δεξί τους όριο.

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

5. Πώς να καθαρίσετε τα "Πλωτά"?

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

Και έτσι δημιουργείτε ένα στοιχείο ζωντανό κοντά σε ένα "Float" χωρίς συμβιβασμούς.

Υπάρχει μια άλλη μέθοδος όπου τα στοιχεία δεν θα είναι καν κοντά σε "αδέρφια" Float. Χρησιμοποιώντας το Σαφή χαρακτηριστικό που μπορείτε να κάνετε ένα στοιχείο ελεύθερο από το να βρίσκεστε κοντά σε ένα "Float".

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

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

Περίληψη

1. Τα απόλυτα / σταθερά στοιχεία δεν θα επιπλέουν.
2. Ένα "Float" δεν υπερβαίνει το στοιχείο πριν αυτό στον κώδικα.
3. Εάν δεν υπάρχει αρκετός χώρος στο δοχείο, ένα "Πλωτή" θα πιέζεται προς τα κάτω.
4. Όλοι οι "Πλωτήρες" γίνονται σε στοιχεία επιπέδου μπλοκ.
5. Αν το πλάτος δεν έχει οριστεί σε ένα "Float", θα συρρικνωθεί για να ταιριάζει στο περιεχόμενο.
6. Τα αργότερα αδέλφια ενός "Float" είτε θα τα περιβάλλουν (inline & text) είτε θα τα τυλίξουν (μπλοκ).
7. Για να σταματήσετε ένα στοιχείο από το περιτύλιγμα ενός "Float", χρησιμοποιήστε υπερχείλιση: κρυφό.
8. Οι γονείς ενός "Float" s δεν θα αυξήσει το ύψος του για να ταιριάζει στο πλωτήρα.
9. Για να αυξήσετε το ύψος του γονέα ως προς το "Float", χρησιμοποιήστε το υπερχείλιση: κρυφό (ή δημιουργήστε ένα κενό αδελφό με Σαφή μετά από αυτό)
10. Για να αποφύγετε τη χρήση ενός στοιχείου κοντά σε οποιοδήποτε "Float" Σαφή Χαρακτηριστικό.