The Clearfix: Forceer een element om zijn kinderen zelf te zuiveren - CSS-trucs

Anonim

Dit zal je tegenwoordig prima doen (IE 8 en hoger):

.group:after ( content: ""; display: table; clear: both; )

Pas het toe op elk bovenliggend element waarin u de drijvers moet wissen. Bijvoorbeeld:

Je zou dit gebruiken in plaats van de vlotter leeg te maken met zoiets als
onderaan de ouder (gemakkelijk te vergeten, niet goed hanteerbaar in CSS, niet-semantisch) of iets als overflow: hidden;op de ouder te gebruiken (je wilt de overloop niet altijd verbergen ).

Nu voor een stukje geschiedenis!

Dit was de originele populaire versie, ontworpen om browsers zo ver mogelijk terug te ondersteunen:

.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 */

Er was toen een beetje een schonere versie die hier werd gedocumenteerd door Jeff Starr, gebaseerd op het feit dat niemand IE voor Mac gebruikt, en dat is waar de backslash-hack over ging.

.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 */

Toen werd het populair om "groep" als klassenaam te gebruiken, wat mooier en semantischer is (via Dan Cederholm). Ook heeft de contenteigenschap de spatie niet eens nodig, het kan een lege string zijn (via Nicolas Gallagher). Dan, zonder enige tekst, font-sizeis niet nodig (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 */

Als u IE 6 of 7-ondersteuning laat vallen, verwijdert u natuurlijk de bijbehorende regels.

Update 18 mei 2011: Nicolas Gallagher weer met de “micro” clearfix. Zie ook dit extra spul. 
.group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )

Zie bovenaan deze pagina voor de meest moderne versie van de clearfix.

In de toekomst kunnen we mogelijk het volgende doen:

.group ( display: flow-root; )