CSS float
La proprietà CSS float consente di affiancare elementi nel flusso del documento
La proprietà float è stata ampiamente usata per realizzare layout a colonne o posizionare immagini con il testo che scorre accanto. Sebbene oggi sia in parte sostituita da Flexbox e Grid, float rimane utile in molti contesti e compatibile con tutti i browser.
Sintassi
Significato dei valori principali:
-
left: l’elemento viene spostato verso il lato sinistro e gli altri contenuti fluiscono alla sua destra.
-
right: l’elemento viene spostato verso il lato destro e gli altri contenuti fluiscono alla sua sinistra.
-
none: comportamento di default: l’elemento non viene flottato.
-
inline-start / inline-end: direzioni logiche basate sulla scrittura del testo (es. per supporto RTL/LTR). Supporto browser limitato.
Esempio proprietà: float
Codice Esempio: float
.float-box {
border: 2px solid #ccc;
padding: 10px;
width: 80%;
margin: 0 auto;
font-size: 16px;
line-height: 1.6;
}.float-image {
float: left;
margin-right: 15px;
width: 120px;
border-radius: 6px;
}
Contenuto Esempio: float
Esempio di utilizzo di float
In questo esempio, l’immagine è flottata a sinistra e il testo scorre intorno ad essa:
float. L'immagine è flottata a sinistra con float: left, e il testo circostante fluisce accanto ad essa. Questo tipo di tecnica era molto utilizzata prima dell'avvento di Flexbox per creare layout più complessi.
CSS e HTML per l’esempio con float:
<style>
.float-box {
border: 2px solid #ccc;
padding: 10px;
width: 80%;
margin: 0 auto;
font-size: 16px;
line-height: 1.6;
}
.float-image {
float: left;
margin-right: 15px;
width: 120px;
border-radius: 6px;
}
</style>
<div class="float-box">
<img src="https://example.com/image120x120.jpg" class="float-image" alt="immagine flottata" />
Questa è una dimostrazione della proprietà <code>float</code>. L'immagine è flottata a sinistra con <code>float: left</code>, e il testo circostante fluisce accanto ad essa.
</div>
Note:
Le indicazioni dei Browser supportati sono superate grazie alla loro costante evoluzione, si consiglia di verificare la compatibilità dei vari browser eseguendo il test cliccando qui sotto.
Supporto Browser
IP: 216.73.216.118
