Il floating è uno dei concetti CSS fondamentali. Senza la comprensione di questo principio, non è possibile creare pagine web basate su CSS. Per inciso, il floating può essere tradotto molto bene con "fluttuare", il che rende la questione molto chiara. Infatti, alla fine, il floating non significa altro che un elemento si posizioni a sinistra o a destra di un altro elemento. (Di solito l'elemento verrebbe posizionato sotto un altro elemento).
Un primo esempio dovrebbe chiarire questo aspetto.
<p><img src="bild.jpg" /> In questo set ci sono 12 forme personalizzate che potete utilizzare nei vostri volantini, sfondi, ecc. Le forme si suddividono in 18, 21 e 24 strisce e varie larghezze di raggi. Questi preset sono una buona base per bellissimi effetti nei vostri layout e immagini.</p>
Qui è stato definito un paragrafo. All'interno di questo paragrafo ci sono un'immagine e del testo normale.
Guardando il risultato, si può vedere che l'immagine si trova nel flusso di testo.
Ora entra in gioco la proprietà float.
img { float: left;}
Anche qui diamo uno sguardo al risultato.
Quindi l'immagine è stata messa in floating. Il testo fluisce attorno all'immagine.
Alla proprietà float è possibile assegnare i valori left e right per far "galleggiare" l'elemento a sinistra (float: left) o a destra (float: right). Potete anche applicare subito float: right all'immagine.
In questo caso, succedono tre cose:
• L'immagine viene tolta dal flusso normale.
• Piano piano si posiziona all'estrema destra all'interno dell'elemento p.
• Viene mostrata il più a destra possibile.
Guardando i risultati fin qui ottenuti, si capisce che non è ancora molto bello da vedere. In realtà mancano gli spazi tra l'immagine e il testo che fluttua attorno. Modificate quindi la sintassi come segue:
img {
float: left;
margin-right: 20px;
}
All'immagine è stato assegnato un margine destro di 20 pixel. Questo dà il seguente aspetto visivo:
Sperimentate un po' con i margini qui.
Terminare il floating
Tornando all'esempio dell'immagine. Estendo la sintassi aggiungendo un ulteriore paragrafo di testo.
<p><img src="bild.jpg" />In questo set ci sono 12 forme personalizzate che potete utilizzare nei vostri volantini, sfondi, ecc. Le forme si suddividono in 18, 21 e 24 strisce e varie larghezze di raggi. Questi preset sono una buona base per bellissimi effetti nei vostri layout e immagini.</p> <p>In questo set ci sono 12 forme personalizzate che potete utilizzare nei vostri volantini, sfondi, ecc. Le forme si suddividono in 18, 21 e 24 strisce e varie larghezze di raggi. Questi preset sono una buona base per bellissimi effetti nei vostri layout e immagini.</p>
Il risultato appare così:
In realtà non solo il primo, ma anche il secondo paragrafo circonda la grafica. Questo è dovuto al fatto che la grafica sporge verso il basso dal primo paragrafo. Per una migliore comprensione, assegniamo al paragrafo contenente la grafica un colore di sfondo.
Guardando il risultato, si capisce che in effetti la grafica sporge verso il basso dal paragrafo. Questo non è sempre desiderato. A questo punto diventa interessante la proprietà clear. Infatti, essa permette di terminare il floating. clear obbliga l'elemento successivo a iniziare effettivamente sotto a un elemento flottante, e non accanto a esso. La proprietà clear accetta i seguenti valori:
• left – termina il float: left
• right – termina il float: right
• both – termina sia il float: right che il float: left
Nell'esempio seguente assegno al secondo paragrafo clear: left per terminare il floating.
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
img {
float: left;
margin-right: 20px;
}
</style>
</head>
<body>
<p style="background-color:#CCFF66;"><img src="bild.jpg" />In questo set ci sono 12 forme personalizzate che potete utilizzare nei vostri volantini, sfondi, ecc. Le forme si suddividono in 18, 21 e 24 strisce e varie larghezze di raggi. Questi preset sono una buona base per bellissimi effetti nei vostri layout e immagini.</p>
<p style="clear:left;">In questo set ci sono 12 forme personalizzate che potete utilizzare nei vostri volantini, sfondi, ecc. Le forme si suddividono in 18, 21 e 24 strisce e varie larghezze di raggi. Questi preset sono una buona base per bellissimi effetti nei vostri layout e immagini.</p>
</body>
</html>
Attraverso la sintassi mostrata, il secondo paragrafo viene effettivamente visualizzato sotto l'immagine.
Nella maggior parte dei casi, anziché utilizzare clear: left o clear: right, è possibile usare direttamente clear: both. Di conseguenza, è consigliabile creare una classe corrispondente nel proprio foglio di stile, che può essere chiamata all'occorrenza.
.clearing {
clear: both;
}
Questa classe può essere utilizzata ogni volta in cui è necessario interrompere il float di un elemento.
<p class="clearing">Contenuti ...</p>
A cosa serve il float
Ovviamente, il float non è necessario solo per il flusso del testo in relazione alle immagini. In realtà, costituisce il concetto base dei siti Web basati su CSS. Grazie al float, è possibile realizzare facilmente layout a più colonne. Guarda questo esempio:
<!DOCTYPE html>
<html lang="de">
<head>
<title>PSD-Tutorials.de</title>
<meta charset="UTF-8" />
<style>
#navi {
float:left;
width:12em;
background-color:#99FFFF;
}
#inhalt {
margin-left: 14em;
background-color: #FF3333;
}
</style>
</head>
<body>
<div id="navi">
<ul>
<li>Home</li>
<li>Contattaci</li>
<li>Imprint</li>
</ul>
</div>
<div id="inhalt">
Qui si trova il contenuto del sito web.
</div>
</body>
</html>Qui viene costruito un layout a due colonne. La particolarità è che le colonne si trovano una accanto all'altra.
E proprio questo affiancamento è realizzato tramite il concetto di float. Informazioni dettagliate sulla costruzione dei siti Web basati sul float verranno fornite nel corso di questa serie.
