CSS float controlli fanno proprio quello che dice il nome: fanno galleggiare elementi HTML nella pagina, quindi è possibile posizionare elementi senza l'utilizzo di tabelle HTML. La proprietà float è una parte importante del CSS "box model", che determina il layout di una pagina Web. Mentre la proprietà float stesso utilizza alcune variabili, altre proprietà CSS determinare anche l'aspetto degli elementi del fatto galleggiare.

Galleggiante definito

Nel CSS "box model", ogni elemento in una pagina Web è definita come una scatola e posizionati utilizzando una o più proprietà. La proprietà float posizioni una casella a sinistra o a destra rispetto le altre caselle intorno ad esso. La proprietà float appare sia come "galleggiante: sinistra" o "galleggiante: giusto" e normalmente verrà visualizzata una finestra di galleggiare sul lato di estrema sinistra o estrema destra dell'elemento viene spostato all'interno.

Proprietà che interessano Float

Per la sua semplicità, è necessario utilizzare altre proprietà CSS per controllare il posizionamento della finestra di galleggiare. Utilizzare la proprietà padding per posizionare la casella di galleggiare all'interno di un elemento "contenitore". Per specificare lo spazio tra la casella di galleggiare e di altri elementi, utilizzare la proprietà margin. Per rendere mobile un blocco di testo come una colonna, utilizzare la proprietà width per specificare la larghezza della colonna. L'ordine dei tag HTML e contenuto determina anche come galleggiare oggetti si riferiscono agli altri elementi che li circonda. Ad esempio, si può creare una fatto galleggiare colonna di testo e includere una foto fatta galleggiata all'interno di quel testo.

Un galleggiante di compensazione

Per impostazione predefinita, gli elementi che seguono una scatola fatto galleggiare nel codice HTML verranno avvolgerà intorno ad esso. Ad esempio, se si galleggia un'immagine a destra, il testo che segue l'immagine "scorrerà" sul lato sinistro dell'immagine. Per modificare questa impostazione affinché altri elementi non andare a capo, è necessario cancellare il galleggiante aggiungendo un tag per il codice HTML che ha il CSS chiare proprietà applicato. Utilizzando "chiaro: entrambi" costringerà l'elemento successivo sotto la casella di galleggiare. Utilizzando "chiaro: sinistra" o "clear: right" sono utili per "sovrapposizione" allo stesso modo ha galleggiato elementi.

Imparare a stare a galla

Anche se la struttura galleggiante in sé è semplice, altre proprietà CSS influenzerà l'aspetto dei tuoi contenuti fatto galleggiare. Inoltre, i browser come Internet Explorer 6.0 non gestiscono il contenuto fatto galleggiare come costantemente come nuovi browser, richiedere codice aggiuntivo per visualizzare correttamente il contenuto. Tutorial sulla proprietà float può aiutare a comprendere le complesse relazioni tra elementi mobili.