Αυτό θα σας κάνει μια χαρά αυτές τις μέρες (IE 8 και άνω):
.group:after ( content: ""; display: table; clear: both; )Εφαρμόστε το σε οποιοδήποτε γονικό στοιχείο στο οποίο πρέπει να καθαρίσετε τα επιπλέοντα. Για παράδειγμα:
Θα το χρησιμοποιούσατε αντί να καθαρίσετε το float με κάτι σαν overflow: hidden;το γονέα (δεν θέλετε πάντα να κρύψετε την υπερχείλιση ).
Τώρα για λίγη ιστορία!
Αυτή ήταν η αρχική δημοφιλής έκδοση, σχεδιασμένη για να υποστηρίζει προγράμματα περιήγησης όσο το δυνατόν περισσότερο:
.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) .clearfix ( display: inline-block; ) /* start commented backslash hack \*/ * html .clearfix ( height: 1%; ) .clearfix ( display: block; ) /* close commented backslash hack */Υπήρχε λοιπόν μια πιο καθαρή έκδοση που τεκμηριώθηκε εδώ από τον Jeff Starr, με βάση το γεγονός ότι κανείς δεν χρησιμοποιεί IE για Mac, κάτι που ήταν το hacks backslash
.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) * html .clearfix ( zoom: 1; ) /* IE6 */ *:first-child+html .clearfix ( zoom: 1; ) /* IE7 */Στη συνέχεια, έγινε δημοφιλές να χρησιμοποιείται το "group" ως όνομα τάξης, το οποίο είναι καλύτερο και πιο σημασιολογικό (μέσω του Dan Cederholm). Επίσης, η contentιδιοκτησία δεν χρειάζεται καν τον χώρο, μπορεί να είναι κενή χορδή (μέσω Nicolas Gallagher). Τότε, χωρίς κανένα κείμενο, font-sizeδεν είναι απαραίτητο (Chris Coyier).
.group:after ( visibility: hidden; display: block; content: ""; clear: both; height: 0; ) * html .group ( zoom: 1; ) /* IE6 */ *:first-child+html .group ( zoom: 1; ) /* IE7 */Φυσικά, εάν ρίξετε IE 6 ή 7 υποστήριξη, αφαιρέστε τις σχετικές γραμμές.
Ενημέρωση 18 Μαΐου 2011: Ο Nicolas Gallagher ξανά με το "micro" clearfix. Δείτε επίσης αυτό το πρόσθετο υλικό..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Δείτε την κορυφή αυτής της σελίδας για την πιο σύγχρονη έκδοση του Clearfix.
Στο μέλλον, θα μπορούσαμε να κάνουμε:
.group ( display: flow-root; )