Bu, bugünlerde size iyi gelecek (IE 8 ve üstü):
.group:after ( content: ""; display: table; clear: both; )Yüzenleri temizlemeniz gereken herhangi bir ana öğeye uygulayın. Örneğin:
Bunu, şamandırayı overflow: hidden;ebeveynde olduğu gibi (her zaman taşmayı gizlemek istemezsiniz) yerine kullanırsınız. ).
Şimdi biraz tarihe bakalım!
Bu, olabildiğince eski tarayıcıları desteklemek için tasarlanmış orijinal popüler sürümdü:
.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 */Daha sonra, Jeff Starr tarafından, kimsenin Mac için IE kullanmadığı gerçeğine dayanan, burada ters eğik çizgi kesmek için kullanılan biraz daha temiz bir sürüm vardı.
.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 */Daha sonra, daha güzel ve daha anlamsal bir sınıf adı olarak (Dan Cederholm aracılığıyla) "grup" u kullanmak popüler hale geldi. Ayrıca, contentmülk boşluğa bile ihtiyaç duymaz, boş dizge olabilir (Nicolas Gallagher aracılığıyla). Daha sonra herhangi bir metin olmadan font-sizeihtiyaç duyulmaz (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 */Elbette, IE 6 veya 7 desteğini düşürürseniz, ilgili hatları kaldırın.
Güncelleme 18 Mayıs 2011: Nicolas Gallagher, "mikro" açık düzeltme ile tekrar. Ayrıca bu ek şeylere bakın..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Clearfix'in en modern versiyonu için bu sayfanın en üstüne bakın.
Gelecekte şunları yapabiliriz:
.group ( display: flow-root; )