Fem una ullada al disseny de quadrícula del lloc i desglossem els components individuals. Explorem per què és tan útil el float, així com la popular tècnica per construir la primera quadrícula web a partir de tres fluxos i un peu de pàgina.
Per estudiar la construcció de la xarxa d'un lloc, heu d'entendre què és un "flux". Els fluxos són els elements del lloc, situats un darrere l’altre. Per exemple, aquests poden ser elements div que van un darrere l’altre per defecte. Però es pot reordenar el flux i es pot canviar la posició dels elements del bloc.
Per controlar el flux, fem servir la propietat float, que pot col·locar el bloc al costat esquerre o dret. N’hi ha prou amb escriure al fitxer CSS:
"nom de classe o bloc" {float: dreta / esquerra; }
L'únic inconvenient del flotant és la possibilitat de "superposar" un bloc sobre un altre.
Per evitar un atropellament, fem servir clear: both: aquesta propietat establirà el flux al voltant del bloc. Establim l'amplada i l'alçada, com a màxim i mínim, de manera que el valor es formi en funció de la mida del contingut (text, imatges). Marge: estableix el valor en automàtic perquè els marges externs es formin automàticament en funció de la ubicació del bloc.
Com que el flotador pot col·locar blocs en dues direccions, és habitual dividir el lloc en corrents (esquerra i dreta). Si el programador només necessita dos fluxos, deixa els flotadors esquerra i dreta, però si n’hi ha més de dos, llavors ajusta els marges mitjançant el marge. Com passa això:
.column1 {float: left; amplada: 65 px; alçada mínima: 50 px; marge-dreta: 9 px; // 9 px des del quadre central}
2 flux:
.column2 {float: left; // al bloc esquerre, però sense "superposició", ja que hem aplicat amplada de marge: 80 px; alçada mínima: 50 px; }
3 flux:
.column3 {float: right; amplada: 65 px; alçada mínima: 50 px; }
Tractament del peu de pàgina (.footer):
.footer {clar: tots dos; // embolicar-se pels dos costats}
Així és com vam fer una quadrícula per al lloc mitjançant float, formada per tres corrents.
