§1 Vediamo come si comportano i diversi elementi quando ad essi viene applicata la property
float.
Float rende il box, contenente l'elemento, "galleggiante"
sopra il suo contenitore.
Il box "galleggiante" si porta in
primo piano, lasciando libera l'area precedentemente occupata.
Lo spazio lasciato libero viene occupato dai box degli elementi che lo seguono, i quali
salgono verso l'alto sino ad occupare la posizione che avrebbero avuto se il box
"galleggiante" non ci fosse mai stato.
Inoltre il loro contenuto "scorre" a destra o a sinistra in modo da non essere coperto.
§2 In aggiunta a questo, l'oggetto "galleggiante", si sposta a sinistra o a destra a seconda del valore left o right assegnato a float restando comunque sopra il suo contenitore.
§3 I due riquadri seguenti, illustrano il funzionamento di float nel caso di applicazione
ad una immagine.
Per meglio evidenziarne gli effetti ho assegnato colori di background diversi agli elementi
coinvolti.
Un piccolo kit di utensili che porto sempre con me per risolvere piccoli problemi
di manutenzione.
Si tratta di una dotazione di primo intervento che può rivelarsi utile in diverse
circostanze. E' composto da:
Un piccolo kit di utensili che porto sempre con me per risolvere piccoli problemi
di manutenzione.
Si tratta di una dotazione di primo intervento che può rivelarsi utile in diverse
circostanze. E' composto da:
§4 Vi faccio notare come anche i due precedenti riquadri colorati siano "galleggianti" sopra al loro contenitore, il body, e come il contenuto di questo paragrafo sia scorso a destra per non essere coperto.
§5 Segue un altro riquadro flottante, che differisce dal precedente solo per il valore della property float applicata all'immagine: right invece di left.
Un piccolo kit di utensili che porto sempre con me per risolvere piccoli problemi
di manutenzione.
Si tratta di una dotazione di primo intervento che può rivelarsi utile in diverse
circostanze. E' composto da:
§6 Questo paragrafo e l'intestazione che lo precede, sono influenzati
dall'elemento flottante alla loro destra.
Per interrompere questo comportamento è
disponibile la property clear,
(clear:left, clear:right, clear:both), che ripristina il posizionamento
normale dell'elemento a cui è applicata e agli elementi a questo successivi.
Il funzionamento di clear è illustrato dal riquadro seguente.
Come forzare la ripresa normale del flusso degli elementi che seguono un oggetto "galleggiante".
Un piccolo kit di utensili che porto sempre con me per risolvere piccoli problemi
di manutenzione.
Si tratta di una dotazione di primo intervento che può rivelarsi utile in diverse
circostanze. E' composto da:
Per questo paragrafo ho impostato clear:right che provoca il posizionamento del paragrafo stesso e di quelli che gli succederanno secondo il flusso normale.
§7 Tutti i riquadri sino ad ora mostrati sono stati dichiarati float:left, anche quelli
che occupano la parte destra dello schermo.
Questo perchè la regola float:left,
applicata ad un elemento, fa si che il box dell'elemento si sposti, nel suo contenitore,
il più possibile a sinistra rispettando gli elementi già posizionati sul suo layer.
Cercherò di illustrare questo concetto con più dettaglio nei prossimi riquadri.
§8 Per ora concludo la trattazione di clear facendo notare come l'operazione di clear si sia propagata anche al di fuori del riquadro contenente il paragrafo su cui è stata dichiarata.
§9 Gli esempi sino ad ora mostrati mostravano contenitori in cui c'era un solo elemento
"galleggiante" seguito da elementi "normali" il cui contenuto di riposiziona per occupare
lo spazio lasciato libero dall'elemento flottante.
Ma cosa succede se dichiaro float più di un elemento dello stesso contenitore? Lo vedremo
nei seguenti riquadri che ci faranno meglio capire il significato di float:..
Il contenuto della mia cassetta degli attrezzi.
Alcune ciliege mature del nostro albero.
Una foto scattata anni fa in Calabria.
Il contenuto della mia cassetta degli attrezzi.
Alcune ciliege mature del nostro albero.
Una foto scattata anni fa in Calabria.
§10 Tutti gli elementi del riquadro di sinistra sono posizionati secondo il flusso normale.
§11 Nel contenitore di destra tutte le immagini sono state dichiarate float:left.
L'effetto di questa impostazione è tuttaltro che soddisfacente. Per migliorare le cose inseriamo clear:left
fra le proprietà delle intestazioni "ciliege" e "goletta".
Il risultato di tale operazione è il seguente:
Il contenuto della mia cassetta degli attrezzi.
Alcune ciliege mature del nostro albero.
Una foto scattata anni fa in Calabria.
§12 Un'altra soluzione che da risultati quasi identici è quella di inserire le immagini float:left all'interno dei paragrafi
Il contenuto della mia cassetta degli attrezzi.
Alcune ciliege mature del nostro albero.
Una foto scattata anni fa in Calabria.
§13 L'unica differenza fra le due ultime disposizioni è che nell'ultima le foto hanno rispettato il padding dei paragrafi.
§14 Per far si che l'area azzurra si estesse sotto l'ultima foto ho inserito, dopo il paragrafo con la didascalia, un paragrafo vuoto con la proprietà clear:left.
§15 Nel prossimo esempio richiameremo l'attenzione su un fenomeno collegato al
"galleggiamento" che sino ad ora non abbiamo trattato
Vedremo cosa succede ad un elemento di tipo block, ol, nello specifico quando
viene reso "galleggiante".
Elenco delle proprietà css che hanno a che fare con il posizionamento visuale degli oggetti
La property position ha per default il valore static. In questa pagina tutti gli oggetti
hanno posizionamento statico
Le properties left, top, right, bottom, non hanno effetto sugli oggetti posizionati
staticamente, pertanto non sono mai state utilizzate in questa pagina.
Elenco delle proprietà css che hanno a che fare con il posizionamento visuale degli oggetti
La property position ha per default il valore static. In questa pagina tutti gli oggetti
hanno posizionamento statico
Le properties left, top, right, bottom, non hanno effetto sugli oggetti posizionati
staticamente, pertanto non sono mai state utilizzate in questa pagina.
§16 Possimo notare che il box contenente ol oltre a sollevarsi dal suo contenitore, sembra abbassarsi.
Questo è dovuto al fatto che il suo margine superiore non è più adiacente ad alcun altro margine
e pertanto non collassa.
§17 Notiamo anche che l'elemento ol di default non ha margine destro e quindi non c'è alcuno spazio prima del testo adiacente.
§18 Per eliminare gli inconvenienti sopra osservati si possono modificare i margini dei box flottanti in questi termini: azzerare margin-top, assegnare un valore maggiore di 0 a margin-right per i box float:left, e analogamente modificare margin-left per box float:right.
Elenco delle proprietà css che hanno a che fare con il posizionamento visuale degli oggetti
La property position ha per default il valore static. In questa pagina tutti gli oggetti
hanno posizionamento statico
Le properties left, top, right, bottom, non hanno effetto sugli oggetti posizionati
staticamente, pertanto non sono mai state utilizzate in questa pagina.
§19 Per il momento credo di aver analizzato sufficientemente la proprietà float.
§20 Concludo mostrando le regole di stile scritte per ottenere/annullare gli effetti di galleggiamento prensenti in questa pagina:
.floatLeft{
float:left;
}
.floatRight{
float:right;
}
.clearLeft{
clear:left;
}
.clearRight{
clear:right;
}
.floatLeftMigliorato{
float:left;
margin-top:0;
margin-right:1em;
}
§21 In pratica, per rendere un elemento flottante, non ho fatto altro che dichiarare l'elemento appartente ad una delle classi floatLeft o floatRight, ed analogamente, per ricondurre un elemento al suo comportamento normale è bastato dichiararlo appartenente alla classe clearLeft o clearRight. classe