O mică precizare despre .clearfix
Chiar dacă unii sunt împotriva clasei clearfix, eu obișnuiesc să o folosesc ca modalitate rapidă de a „curăța mizeria” lăsată în urmă de elementele ce au float setat. Aproape toți cei asupra cărora am avut o oarecare urmă de influență – și aparent sunt mai mulți decât aș fi putut spera vreodată! – folosesc acest clearfix. Problema însă este că foarte puțini îl folosesc corect, așadar am hotărât să înșir cele câteva reguli:
- Dacă un element are un
floatsauoverflowsetat NU i se adaugă clasaclearfix. Nu afectează dar nici nu are vreun efect; - Dacă un element nu are „copii” ce au
floataplicat, NU i se adaugă clasaclearfix. Aici pot apărea probleme, de la spații apărute de nicăieri până la stricarea layout-ului; - Dacă un element este ultimul element vizibil din pagină (e.g. footer), NU i se adaugă
clearfix. Firefox are tendința de a adăuga un spațiu razna.
Când și unde se adaugă clearfix? Simplu! Se adaugă doar ancestor-ului (străbun e prea ciudat!) elementului ce are float! Nu este musai să fie părintelui imediat.
N-a fost chiar atât de greu, nu? 
- Posted in:
- CSS
- Tags:
- Best Practices,
- Tips
De precizat ca alternativa la “clearfix” float:left; si width:100%;. Desi metoda asta era un chin pana acu’ ceva vreme, acum ne salveaza box-sizing :D. Alta alternativa ar mai fi un overflow:hidden;
Ca si tine, si eu prefer sa precizez “clearfix” ( ghici de la cine am invatat ), doar ca in anumite situatii cand div-ul se repeta de prea multe ori folosesc una dintre alternative
@Ștefan: despre alternative, cu altă ocazie