Ας δώσουμε προσοχή στα μειονεκτήματα του float. Πώς συμπεριφέρονται τα μπλοκ και τα ενσωματωμένα στοιχεία μεταξύ τους και εάν θα τα χρησιμοποιούν μαζί. Ας αναλύσουμε τι είναι η απώλεια και πώς να την αντιμετωπίσουμε.
Παρά το γεγονός ότι στο τελευταίο άρθρο δημιουργήσαμε ένα απλό πλέγμα για τον ιστότοπο χρησιμοποιώντας πλωτήρες, προορίζονται αρχικά να προσαρμόσουν τη ροή των στοιχείων στο κείμενο. Το Float έχει τρεις σημασίες: αριστερά - τα στοιχεία κολλούν στο αριστερό περιθώριο. δεξιά - τα στοιχεία πιέζονται στη δεξιά άκρη. κανένας - Η λειτουργία αναδίπλωσης είναι απενεργοποιημένη.
Ένα στοιχείο που είναι τυλιγμένο με πλωτήρα μπορεί να έχει μέγεθος και επένδυση, αλλά αν το στοιχείο είναι ευθυγραμμισμένο θα συμπεριφέρεται σαν στοιχείο μπλοκ.
. μπλοκ1 {
float: αριστερά;
πλάτος: 150 εικονοστοιχεία;
}
. μπλοκ2 {
επιπλέουν: δεξιά;
πλάτος: 150 εικονοστοιχεία;
}
Υπάρχει ένα άλλο πρόβλημα όταν χρησιμοποιείτε πλωτήρες, το οποίο πέφτει εκτός ροής. Εμφανίζεται όταν τα μπλοκ πηγαίνουν το ένα μετά το άλλο, αλλά μόνο ένα από αυτά έχει την ιδιότητα float, τότε θα είναι πάνω από τα υπόλοιπα, επειδή δεν βλέπει άλλα μπλοκ. Τα ενσωματωμένα στοιχεία θα τυλίγουν γύρω από τα στοιχεία float, αλλά το μπλοκ που περιέχει αυτό το κείμενο θα παραμείνει κάτω από το στοιχείο float.
Αλλά πώς αλληλεπιδρά το float με το float;
Συμπεριφέρονται σαν κείμενο: στέκονται το ένα μετά το άλλο εφ 'όσον υπάρχει ελεύθερος χώρος και μετά μετακινούνται σε μια νέα γραμμή. Επομένως, με τη βοήθεια πλωτήρων, ξεκινήσαμε να χτίζουμε πλέγματα. Εάν δεν υπάρχει χώρος, τότε μετακινούνται πέρα από το πλάτος του ιστότοπου, δηλαδή δεν πηγαίνουν πουθενά.
Εάν το πλωτήρα δεν βλέπει απλά στοιχεία μπλοκ, τότε τα στοιχεία μπλοκ μπορούν να διδαχθούν να βλέπουν το πλωτήρα. Χρησιμοποιούμε την καθαρή ιδιότητα, η οποία απενεργοποιεί την αναδίπλωση από όλες τις πλευρές (ή από επιλεγμένες). Δηλαδή, ένα στοιχείο με διαυγές θα πέσει κάτω από το στοιχείο με πλωτήρα.
