Lentelėmis formuojamo dizaino laikai pamažu praeina. Dabar struktūra dažniausiai formuojama div elementų pagalba. Juos karts nuo karto tenka pastumti ar į vieną ar į kitą pusę, o tam naudojamos css reikšmės float: left; ar float: right;. Tokiose situacijose dažniausiai ir prireikia clearfix.
Kai vaikiniams elementams yra priskirti float: left; ar float: right; atributai, o tėvinis elementas neturi fiksuoto aukščio, nutinka taip, kad tėvinis elementas vaizduojamas tarsi tuščias, arba tik teksto eilutės aukščio.
Mums norėtųsi, kad tėvinis elementas būtų bent jau tokio aukščio kaip vaikiniai elementai. Štai šią problemą ir išsprendžia clearfix metodas. Jis realizuojamas css faile aprašant klasę, kuri po to priskiriama tėviniam elementui.
-
.clearfix:after {
-
content: ".";
-
display: block;
-
clear: both;
-
visibility: hidden;
-
line-height: 0;
-
height: 0;
-
}
-
-
.clearfix {
-
display: inline-block;
-
}
-
-
html[xmlns] .clearfix {
-
display: block;
-
}
-
-
* html .clearfix {
-
height: 1%;
-
}
Čia aprašyta daugiau klasių su skirtingomis pradžiomis todėl, kad skirtingos naršyklės kai kuriuos atributus supranta skirtingai.
Priskyrus šią klasę aukščio problema bus sutvarkyta ir tėvinis elementas atrodys taip kaip ir norėjome.
