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 float sau overflow setat NU i se adaugă clasa clearfix. Nu afectează dar nici nu are vreun efect;
  • Dacă un element nu are „copii” ce au float aplicat, NU i se adaugă clasa clearfix. 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? :)

2 Comentarii to “O mică precizare despre .clearfix”

  1. 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 :)

  2. Staicu Ionuț-Bogdan

    @Ștefan: despre alternative, cu altă ocazie :)

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>