La proprietà float permette di posizionare un oggetto a destra o sinistra del contenitore.
L'attributo può assumere uno dei seguenti valori:
- left
- right
- none
Con il parametro left spostiamo un oggetto a sinistra del blocco contenitore, lasciando che tutto il resto del contenuto si posizioni alla destra.
Esempi:
<div style="border:1px solid green;">
<div style="border:1px solid red; float:left;">
Contenuto del box con la proprietà float:left;
</div>
Restante testo contenuto nel box principale
</div>
<div style="border:1px solid red; float:left;">
Contenuto del box con la proprietà float:left;
</div>
Restante testo contenuto nel box principale
</div>
Contenuto del box con la proprietà float:left;
Restante testo contenuto nel box principale<div style="border:1px solid green; width:300px;">
<div style="border:1px solid red; float:left; width:150;">
Contenuto del box con la proprietà float:left;
</div>
Restante testo contenuto nel box principale
</div>
<div style="border:1px solid red; float:left; width:150;">
Contenuto del box con la proprietà float:left;
</div>
Restante testo contenuto nel box principale
</div>
Contenuto del box con la proprietà float:left;
Restante testo contenuto nel box principale<div style="border:1px solid green; width:300px; height:150px;">
<img src="/prova1.jpg" alt="prova" style="border:1px solid red; float:left;">
Restante testo contenuto nel box principale
</div>
<img src="/prova1.jpg" alt="prova" style="border:1px solid red; float:left;">
Restante testo contenuto nel box principale
</div>
Restante testo contenuto nel box principaleCon il parametro right spostiamo un oggetto a destra del blocco contenitore, lasciando che tutto il resto del contenuto si posizioni alla sinistra.
Esempi:
<div style="border:1px solid green;">
<div style="border:1px solid red; float:right;">
Contenuto del box con la proprietà float:right;
</div>
Restante testo contenuto nel box principale
</div>
<div style="border:1px solid red; float:right;">
Contenuto del box con la proprietà float:right;
</div>
Restante testo contenuto nel box principale
</div>
Contenuto del box con la proprietà float:right;
Restante testo contenuto nel box principale<div style="border:1px solid green; width:300px;">
<div style="border:1px solid red; float:right; width:150;">
Contenuto del box con la proprietà float:right;
</div>
Restante testo contenuto nel box principale
</div>
<div style="border:1px solid red; float:right; width:150;">
Contenuto del box con la proprietà float:right;
</div>
Restante testo contenuto nel box principale
</div>
Contenuto del box con la proprietà float:right;
Restante testo contenuto nel box principale<div style="border:1px solid green; width:300px; height:150px;">
<img src="/prova1.jpg" alt="prova" style="border:1px solid red; float:right;">
Restante testo contenuto nel box principale
</div>
<img src="/prova1.jpg" alt="prova" style="border:1px solid red; float:right;">
Restante testo contenuto nel box principale
</div>
Restante testo contenuto nel box principaleCon il parametro none manteniamo la posizione di default.
Esempi:
<div style="border:1px solid green;">
<div style="border:1px solid red; float:none;">
Contenuto del box con la proprietà float:none;
</div>
Restante testo contenuto nel box principale
</div>
<div style="border:1px solid red; float:none;">
Contenuto del box con la proprietà float:none;
</div>
Restante testo contenuto nel box principale
</div>
Contenuto del box con la proprietà float:none;
Restante testo contenuto nel box principale<div style="border:1px solid green; width:300px; height:150px;">
<img src="/prova1.jpg" alt="prova" style="border:1px solid red; float:none;">
Restante testo contenuto nel box principale
</div>
<img src="/prova1.jpg" alt="prova" style="border:1px solid red; float:none;">
Restante testo contenuto nel box principale
</div>
Restante testo contenuto nel box principale<div float:left;> unito a <div float:right;>
Se poniamo i due attributi in due differenti box contenuti nello stesso box principale otteniamo un primo esempio di layout a tre colonne, formato ai lati con i due box float, e al centro dal box principale.
Esempio:
<div style="border:1px solid green;width:600px;">
<div style="border:1px solid red; float:left; width:200px;">
Contenuto del box con la proprietà float:left;
</div>
<div style="border:1px solid red; float:right; width:200px;">
Contenuto del box con la proprietà float:right;
</div>
Restante testo contenuto nel box principale
</div>
<div style="border:1px solid red; float:left; width:200px;">
Contenuto del box con la proprietà float:left;
</div>
<div style="border:1px solid red; float:right; width:200px;">
Contenuto del box con la proprietà float:right;
</div>
Restante testo contenuto nel box principale
</div>
Contenuto del box con la proprietà float:left;
Contenuto del box con la proprietà float:right;
Restante testo contenuto nel box principale