Tas šajās dienās jums būs labi (IE 8 un jaunāki):
.group:after ( content: ""; display: table; clear: both; )Pielietojiet to jebkuram vecāku elementam, kurā jums jānotīra pludiņi. Piemēram:
Jūs to izmantojat, nevis notīriet pludiņu ar kaut ko līdzīgu overflow: hidden;vecākam (jūs ne vienmēr vēlaties slēpt pārplūdi ).
Tagad mazliet vēstures!
Šī bija sākotnējā populārā versija, kas paredzēta pārlūkprogrammu atbalstam tik tālu, cik vien iespējams:
.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 */Tad bija mazliet tīrāka versija, kuru šeit dokumentēja Džefs Stārs, pamatojoties uz faktu, ka neviens neizmanto IE Mac datoriem, par ko bija domāts uzlaušanas slīpsvītra.
.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 */Tad kļuva populāri izmantot “grupu” kā klases nosaukumu, kas ir jaukāks un semantiskāks (izmantojot Dan Cederholm). Arī contentīpašums nav pat nepieciešams telpu, tā var būt tukša virkne (ar Nicolas Gallagher). Tad bez teksta font-sizenav vajadzīgs (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 */Protams, ja jūs pametat IE 6 vai 7 atbalstu, noņemiet saistītās līnijas.
Atjauninājums 2011. gada 18. maijā: Nikolass Galahers vēlreiz ar “micro” dzēšanas labojumu. Skatiet arī šo papildinformāciju..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Skatiet šīs lapas augšdaļu, lai iegūtu vismodernāko skaidrojumfaila versiju.
Nākotnē mēs, iespējams, varēsim darīt:
.group ( display: flow-root; )