La proprietà CSS float specifica come un elemento dovrebbe fluttuare.

La proprietà CSS float specifica quali elementi possono fluttuare accanto a un elemento deselezionato e su quale lato.

La proprietà float

La proprietà float è usata per posizionare e formattare il contenuto, ad esempio una immagine fluttua a sinistra del testo in un contenitore.

La proprietà float può avere uno dei seguenti valori:

• left - L'elemento fluttua a sinistra del suo contenitore
• right - L'elemento fluttua a destra del suo contenitore
• none - L'elemento non fluttua (verrà mostrato proprio dove si trova nel testo). Questo è il default.
• inherit - L'elemento eredita il valore float del suo genitore

Nel suo uso più semplice, la proprietà float può essere usata per raccogliere il testo attorno alle immagini.

Esempio - float: right;

Il seguente esempio specifica che un'immagine dovrebbe fluttuare a destra in un testo.

img {
  float: right;
}

Visualizza esempio

Esempio - float: left;

Il seguente esempio specifica che un'immagine dovrebbe fluttuare a sinistra in un testo.

img {
  float: left;
}

Visualizza esempio

Esempio - senza float

Nel seguente esempio l'immagine sarà mostrata proprio dove si trova nel testo (float: none;).

img {
  float: none;
}

Visualizza esempio

Esempio - float uno accanto all'altro

Normalmente gli elementi div saranno mostrati in cima l'un l'altro. Tuttavia, se usiamo float: left; possiamo permettere agli elementi di fluttuare l'uno accanto all'altro.

div {
  float: left;
  padding: 15px;
}

.div1 {
  background: red;
}

.div2 {
  background: yellow;
}

.div3 {
  background: green;
}

Visualizza esempio

La proprietà clear

Quando usiamo la proprietà float, e vogliamo che l'elemento di sotto successivo non sia sulla destra o sulla sinistra, useremo la proprietà clear.

La proprietà clear specifica quello che succederà all'elemento che è successivo a un elemento fluttuante.

La proprietà clear può avere uno dei seguenti valori:

• none - L'elemento non viene inserito sotto gli elementi fluttuanti a sinistra o destra. Questo è il default.
• left - L'elemento è inserito sotto gli elementi fluttuanti a sinistra
• right - L'elemento è inserito sotto gli elementi fluttuanti a destra
• both - L'elemento è inserito sotto entrambi gli elementi fluttuanti a sinistra e destra
• inherit - L'elemento eredita il valore clear dal suo genitore

Quando si eliminano i fluttuanti, bisognerebbe abbinare il clear al float: se un elemento è fluttuante a sinistra, si deve eliminare a sinistra. L'elemento fluttuante continuerà a fluttuare, ma l'elemento con il clear apparirà sotto nella pagina web.

Esempio

Questo esempio elimina il float a sinistra. Qui significa che l'elemento div2 è inserito sotto l'elemento fluttuante a sinistra div1:

.div1 {
  float: left;
}

.div2 {
  clear: left;
}

Visualizza esempio

Il clearfix Hack

Se un elemento fluttuante è più alto dell'elemento contenitore, sborderà al di fuori del suo contenitore. Possiamo quindi aggiungere un clearfix Hack per risolvere questo problema:

Esempio

.clearfix {
  overflow: auto;
}

Visualizza esempio

Il clearfix overflow: auto; funziona bene fintanto che siamo in grado di mantenere il controllo dei margini e del padding (altrimenti si possono vedere delle scrollbars). Il nuovo e moderno clearfix Hack, tuttavia, è più sicuro da usare e il codice seguente è usato per la maggior parte delle pagine web:

Esempio

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Visualizza esempio

Esempi di Float

Griglia di contenitori/Contenitori di stessa larghezza

Con la proprietà float, è facile far fluttuare fianco a fianco caselle di contenuto:

* {
  box-sizing: border-box;
}

.box {
  float: left;
  width: 33.33%; /* three boxes (use 25% for four, and 50% for two, etc) */
  padding: 50px; /* if you want space between the images */
}

Visualizza esempio

Immagini affiancate

La griglia di contenitori può essere usata per mostrare immagini affiancate:

.img-container {
  float: left;
  width: 33.33%; /* three containers (use 25% for four, and 50% for two, etc) */
  padding: 5px; /* if you want space between the images */
}

Visualizza esempio

Contenitori di eguale altezza

Nell'esempio precedente, abbiamo imparato come far fluttuare contenitori affiancati con una eguale ampiezza. Tuttavia, non è facile creare contenitori fluttuanti di eguale altezza. Una soluzione rapida, tuttavia, consiste nell'impostare un'altezza fissa come nel seguente esempio:

.box {
  height: 500px;
}

Visualizza esempio

Tuttavia, questo non è molto flessibile. Va bene se si può garantire che i contenitori avranno sempre lo stesso contenuto al loro interno. Ma spesso, il contenuto non è il medesimo. Se si prova l'esempio su riportato su uno smartphone, si vedrà che la seconda casella di contenuto sarà visualizzata al di fuori del contenitore. Qui viene in soccorso la proprietà CSS3 flexbox, che può automaticamente allungare le caselle fino alla casella più lunga:

Visualizza esempio

Menù di navigazione

Si può usare float anche con una lista di link ipertestuali per creare un menù orizzontale.

Visualizza esempio

Esempio di layout web

E' di uso molto comune usare la proprietà float per creare l'intero layout di un sito web:

.header, .footer {
  background-color: grey;
  color: white;
  padding: 15px;
}

.column {
  float: left;
  padding: 15px;
}

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

.menu {
  width: 25%;
}

.content {
  width: 75%;
}

Visualizza esempio