La proprietà float in CSS viene utilizzata per il posizionamento e il layout delle pagine web. Può essere usata per spostare un elemento a destra o a sinistra all'interno dell'elemento che lo contiene.
L'immagine qui a sinistra ha la proprietà 
float:left, quindi viene inserita accanto a questo testo.La proprietà float può assumere i seguenti valori:
left: l'elemento viene posizionato a sinistra nell'elemento contenitore, e gli altri contenuti si dispongono attorno sulla destra.right: l'elemento viene posizionato a destra nell'elemento contenitore, e gli altri contenuti si dispongono attorno sulla sinistra.none: l'elemento non ha un allineamento specificato (valore predefinito).inline-start: l'elemento si allinea all'inizio della direzione del testo, che può essere a sinistra o a destra a seconda della lingua (sinistra per lingue come l'italiano, destra per lingue come l'arabo).inline-end: l'elemento si allinea alla fine della direzione del testo, che può essere a destra o a sinistra a seconda della lingua.Vediamo un esempio con float:
<img src="foto.jpg">
<p>Lorem ipsum odor amet, consectetuer adipiscing elit. Tristique commodo sem rhoncus non iaculis
torquent magna. Suscipit quisque tempor erat amet in erat. Ut taciti aliquet feugiat libero amet
donec. Porta phasellus nulla ex hendrerit sed dictum purus lacinia. Interdum vel viverra aliquet vel
netus; augue pharetra.</p>
<style>
img {
float: right;
margin: 10px;
}
</style>Nell'esempio, l'immagine si trova a destra del testo. Apparirebbe in questo modo:
Lorem ipsum odor amet, consectetuer adipiscing elit. Tristique commodo sem rhoncus non iaculis torquent magna. Suscipit quisque tempor erat amet in erat. Ut taciti aliquet feugiat libero amet donec. Porta phasellus nulla ex hendrerit sed dictum purus lacinia. Interdum vel viverra aliquet vel netus; augue pharetra. Sollicitudin facilisi mus sodales euismod quisque laoreet conubia.Se invece impostiamo float:none, vedremo questo tipo di problema (non molto gradevole graficamente):
Lorem ipsum odor amet, consectetuer adipiscing elit. Tristique commodo sem rhoncus non iaculis torquent magna. Suscipit quisque tempor erat amet in erat. Ut taciti aliquet feugiat libero amet donec. Porta phasellus nulla ex hendrerit sed dictum purus lacinia.Possiamo allineare più elementi, uno a destra e uno a sinistra, nello stesso elemento contenitore. Ad esempio, possiamo allineare due blocchi che contengono del testo in questo modo:
<div class="elemento1">Lorem ipsum odor amet...</div>
<div class="elemento2">Lorem ipsum odor amet...</div>
<style>
.elemento1 {
float: left;
width: 48%;
}
.elemento2 {
float: right;
width: 48%;
}
</style>Usare la proprietà float potrebbe comportare dei problemi. Proprio come dice il nome, gli elementi con float "galleggiano" nell'elemento che li contiene. Sono presenti nella pagina, ma le loro dimensioni non contano. Per capire meglio, guarda cosa accade con una semplice immagine con float:left:
L'elemento contenitore (quello con il bordo grigio) non tiene conto delle dimensioni dell'immagine, perché è stato impostato l'attributo CSS float.
Per risolvere questo problema, esistono due metodi principali.
Se imposti l'attributo overflow (che vedremo nella lezione su overflow) con valore auto o hidden, le dimensioni dell'elemento contenitore verranno automaticamente aumentate per contenere anche gli elementi con float.
<div><img src="foto.png"></div>
<style>
div {
overflow: auto;
}
img {
float: right;
}
</style>Considera, tuttavia, che overflow non è specifico per risolvere il problema di float. Il suo utilizzo potrebbe modificare il comportamento degli elementi senza volerlo, come vedremo nella prossima lezione.
Esiste uno specifico metodo, chiamato "clearfix", nato proprio per evitare che elementi con float causassero problemi grafici nelle pagine web. L'attributo da usare si chiama clear e deve essere inserito, normalmente, in un elemento al di sotto dell'elemento che ha float (guarda l'esempio di codice CSS che segue per capire meglio).
L'attributo clear accetta i seguenti valori:
none, che non attua alcuna modifica.left, che riempie gli spazi solo degli elementi con float:left.right, che riempie gli spazi solo degli elementi con float:right.both, che riempie gli spazi di tutti gli elementi con float.Vediamo il funzionamento di base di clear:
<div>
<div class="float">Elemento con float</div>
<div class="clearfix"></div> <!-- Ridimensiona correttamente il div contenitore -->
</div>
<style>
div.float {
float: left;
}
.clearfix {
clear: both;
}
</style>Non sempre è possibile aggiungere un <div> all'interno della pagina, e può rendere meno ordinato il codice HTML. Per questo, un trucco che si usa spesso (e che ti consigliamo) è questo:
<div class="clearfix">
<div class="float">Elemento con float</div>
<!-- Nessun div necessario -->
</div>
<style>
div.float {
float: left;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>In questo caso si usa lo pseudo-elemento ::after, che vedremo in dettaglio nella lezione degli pseudo-elementi.