Float in CSS

La proprietà float viene utilizzata per il posizionamento e la formattazione del contenuto, ad esempio per far sì che un’immagine fluttui a sinistra del testo.

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à visualizzato esattamente dove compare nel testo). Questo è il valore predefinito
• inherit - L’elemento eredita il valore di float dal suo elemento genitore

Nel suo uso più semplice, la proprietà float può essere utilizzata per far sì che il testo venga avvolto intorno alle immagini.

<div>
  <img src="..." alt="..." />
  <p>paragrafo con testo lunghissimo...</p>
</div>

img {
  float: right;
}

Prorietà clear

Quando utilizziamo la proprietà float e vogliamo che l’elemento successivo sia sotto (non a destra o a sinistra), dovremo utilizzare la proprietà clear.

La proprietà clear specifica cosa dovrebbe accadere con l’elemento che è accanto a un elemento fluttuante.

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

• none - L’elemento non viene spostato sotto gli elementi fluttuanti a sinistra o a destra. Questo è il valore predefinito.
• left - L’elemento viene spostato sotto gli elementi fluttuanti a sinistra.
• right - L’elemento viene spostato sotto gli elementi fluttuanti a destra.
• both - L’elemento viene spostato sotto sia gli elementi fluttuanti a sinistra che quelli a destra.
• inherit - L’elemento eredita il valore di clear dal suo elemento genitore.

Quando si cancellano le fluttuazioni, è necessario abbinare il clear al float: se un elemento è fluttuante a sinistra, allora dovresti cancellare a sinistra. Il tuo elemento fluttuante continuerà a fluttuare, ma l’elemento cancellato apparirà sotto di esso sulla pagina web.

img {
  float: left;
}

p {
  clear: left;
}