Creato il 09 dicembre 2009 da ABC Web e Grafica
Key words correlate: HTML - CSS - float - posizionamento oggetti
=> In questo articolo si farà riferimento a dei CSS esterni all'HTML.
Quando si comincia a mettere le mani in pasta nell'HTML e nel CSS ci si imbatte certamente nel posizionamento degli oggetti nella pagina.
Vi sono due principali sistemi per ottenerlo: l'utilizzo del "float" e quello del "position".
In questo articolo tratterò solo della qualità float.
°°° FLOAT °°°
Il float si utilizza per posizionare un oggetto a destra oppure a sinistra del resto del documento. Se "flottiamo" un oggetto tutto il resto del contenuto gli "girerà" attorno.
Qui sotto viene vista la sintassi del CSS per un ipotetica classe .sinistra . L'oggetto che prende questa proprietà verrà visualizzato come in questo esempio (si apre in altra pagina).
Ecco tutti i possibili attributi di float:
I float vengono utilizzati moltissimo con le immagini all'interno del testo. Con i dovuti accorgimenti infatti (un po' di margine attorno all'immagine per esempio) si ottengono delle cose gradevoli e semplici da realizzare.
Il sistema del float (associato alla proprietà margin) spesso viene utilizzato anche per creare i menù laterali oppure i layout su più colonne.
Questo ultimo caso viene realizzato creando un menù verticale che viene "flottato" (per esempio a sinistra) e alla colonna del contenuto viene associato un margine sufficientemente grande da non "circondare" il menù. Questo esempio renderà il tutto più chiaro (si apre in altra pagina).
Utilizzando il float potrebbero venire a formarsi alcuni sgradevoli inconvenienti dovuti al fatto che il float non viene "visto" dagli elementi in cui è contenuto.
Per ovviare a questo problema si ricorre al clear che viene utilizzato per "stoppare" il float. (questo argomento verrà trattato in altro momento)