Diamo un'occhiata al design della griglia del sito e analizziamo i singoli componenti. Esploriamo perché float è così utile, così come la tecnica popolare per costruire la prima griglia web da tre flussi e un piè di pagina del sito.
Per studiare la costruzione della griglia di un sito, è necessario capire cos'è un "flusso". I flussi sono gli elementi del sito, posizionati uno dopo l'altro. Ad esempio, possono essere elementi div che si susseguono uno dopo l'altro per impostazione predefinita. Ma il flusso può essere riorganizzato e la posizione degli elementi del blocco può essere modificata.
Per controllare il flusso, usiamo la proprietà float, che può posizionare il blocco sul lato sinistro o destro. È sufficiente scrivere nel file CSS:
"nome classe o blocco" {float: destra/sinistra; }
L'unico inconveniente di float è la capacità di "sovrapporre" un blocco sopra l'altro.
Per evitare di travolgere, usiamo clear: both - questa proprietà imposterà il flusso intorno al blocco. Impostiamo la larghezza e l'altezza, come massima e minima, in modo che il valore si formi in base alla dimensione del contenuto (testo, immagini). Margine: imposta il valore su automatico in modo che i margini esterni vengano formati automaticamente in base alla posizione del blocco.
Poiché float può posizionare blocchi in due direzioni, è consuetudine dividere il sito in flussi: sinistro e destro. Se il programmatore ha bisogno solo di due flussi, lascia i float sinistro e destro, ma se ce ne sono più di due, regola i margini usando margin. Come avviene questo:
.column1 {float: sinistra; larghezza: 65px; altezza minima: 50px; margine destro: 9px; // 9 px dal riquadro centrale}
2 flusso:
.column2 {float: sinistra; // al blocco di sinistra, ma senza "sovrapposizione", poiché abbiamo applicato la larghezza del margine: 80px; altezza minima: 50px; }
3 flusso:
.column3 {float: destra; larghezza: 65px; altezza minima: 50px; }
Gestire il piè di pagina (.footer):
.footer {clear: entrambi; // avvolge entrambi i lati}
Ecco come abbiamo creato una griglia per il sito utilizzando float, composta da tre flussi.
