La proprietà float è uno strumento di posizionamento CSS che racconta un elemento flottato a spostarsi verso il lato; tutti gli altri elementi della pagina dispongono in ordine intorno all'elemento galleggiava. Galleggiante può essere aggiunto ad un tag HTML utilizzando l'attributo "style" - ad esempio <div style = "float: left;"> - e in grado di avvolgere il contenuto intorno ad un elemento o per strutturare le colonne e gli elementi in una pagina senza utilizzare il posizionamento assoluto .

Capire galleggiante

È possibile impostare un elemento di galleggiare a destra oa sinistra; andrà quanto possibile al lato definito seguendo il flusso del contenuto. Quando l'elemento viene fatto galleggiare, altri elementi della pagina avvolgono intorno ad esso. Il vantaggio per gli elementi galleggianti è in termini di flessibilità; è possibile modificare le dimensioni del vostro elemento galleggiava a capriccio, e il resto della pagina si conformerà intorno ad esso. Se si dispone di più elementi galleggianti accanto all'altra, si impilare al lato. È possibile utilizzare questo a vostro vantaggio per creare colonne o una fila di elementi.

Utilizza per un galleggiante

Sperimentare con l'attributo galleggiante è il modo più semplice per vedere che cosa funziona. Se si desidera incorporare un'immagine in un corpo di testo, usando un galleggiante provoca il testo per avvolgere intorno ad esso. Questo è l'uso semplice di un elemento flottante, ma non significa quella esclusiva. Se si voleva incorporare un preventivo all'interno del corpo del testo, come riviste a volte si per portare attenzione ad un punto, è possibile utilizzare un div o luce elemento galleggiante per formattare e incorporare il testo. Utilizzando la proprietà float con strati div, è possibile strutturare l'intera pagina senza usare le tabelle; questo crea un layout a colonne più flessibile che utilizza meno codice rispetto alle tabelle. È inoltre possibile utilizzare elementi span flottato a fare la prima lettera di un paragrafo più grande rispetto al resto del testo.

Creazione di un elemento flottante

È possibile aggiungere la proprietà float a qualsiasi tag HTML utilizzando tag "stile"; questo è più disordinato di utilizzare il foglio di stile, ma può essere opportuno se non si ha accesso al foglio di stile del tuo sito web o solo desidera utilizzarlo per una istanza dell'elemento. Floating una immagine di base in questo modo sarebbe simile a questa:

<Img src = stile "image.jpg" = "float: left;" />

Questo funziona allo stesso modo per qualsiasi altro tag HTML si desidera collegare la proprietà galleggiante; se si vuole fare in ogni singola immagine sul tuo sito web galleggiante a sinistra, è possibile aggiungere al vostro foglio di stile in questo modo:

img {
float: left;}

Se si desidera creare colonne su una pagina web, è possibile creare un contenitore e usare galleggianti per contenere colonne e un piè di pagina a tutta larghezza. Un'implementazione di base di questo è

<Div style = "width: 500;">
<Div style = "float: left; width: 250;"> Colonna 1 </ div>
<Div style = "float: right; width: 250;"> Colonna 2 </ div>
<Div style = "width: 500; clear: both;"> Piè di pagina </ div>
</ Div>

Se non si desidera che l'elemento successivo nel flusso dei contenuti per avvolgere il vostro elemento galleggiava, è possibile impostare questo con l'inserimento di un elemento div vuoto sotto di esso, ad esempio,
<Div style = "clear: left;"> </ div>

Se si desidera che questo elemento contenga qualcosa, come un piè di una pagina, che non deve essere lasciato vuoto. Si potrebbe anche usare "clear: right" se l'elemento flottante è stato fissato a destra, o "clear: both" per rimuovere tutte le istanze di galleggiare.

Svantaggi a galleggiante

Mentre galleggiante è più fluido, questo presta a più errori. Se si hanno due elementi galleggianti accanto all'altro in un formato a colonne, aventi un'immagine o una tabella che supera la larghezza della sua div può rompere il flusso, costringendo la seconda colonna sotto il primo. Galleggiante è supportato in tutti i principali browser, ma potrebbero non essere supportate nei browser più anziani; essere sicuri di testare il layout in diversi browser per controllare gli errori.