Proprietà float

La proprietà float - definisce blocchi fluttuanti che verranno circondati dal testo. La proprietà float a volte viene utilizzata in combinazione con la proprietà clear, che annulla l'avvolgimento dell'elemento.

Sebbene inizialmente float fosse stato ideato per inserire blocchi avvolti dal testo, attualmente è utilizzato in modo molto ampio e non standard per la creazione di layout.

Sintassi

selettore {
	float: left | right | none;
}

selettore {
	clear: both | left | right | none;
}

Valori per float

Valore	Descrizione
`left`	Il blocco galleggerà a sinistra e il testo lo avvolgerà a destra.
`right`	Il blocco galleggerà a destra e il testo lo avvolgerà a sinistra.
`none`	Nessun avvolgimento.

Valore predefinito: none.

Valori per clear

Valore	Descrizione
`left`	Annulla l'avvolgimento a sinistra.
`right`	Annulla l'avvolgimento a destra.
`both`	Annulla l'avvolgimento sia a sinistra che a destra.
`none`	Nessuna annullamento dell'avvolgimento.

Valore predefinito: none.

Esempio

Usiamo float in modo non standard, mettendo gli elementi della lista in linea:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

li {
	float: left;
	border: 1px solid red;
}

Vedi anche

la proprietà clear,
che annulla il float per gli elementi sovrastanti