Iniziamo la serie di esempi con un semplice uso della proprietà float su un'immagine. Ad essa abbiamo assegnato questa classe:
img.imag1 {
float : left;
}
Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam
corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam
corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
La differenza rispetto al normale flusso del docuemnto è evidente. All'immagine sotto non abbiamo applicato il floating.
Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam
corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip
ex ea commodo consequat.
Ed ora un esempio di float a destra:
img.imag2 {
float : right;
}
Lorem
ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam
corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip
ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam
corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Il float può essere ovviamente applicato anche ad elementi con testo. In questo caso, però, è obbligatorio usare per essi la prprietà width:
div.box1 {
width: 200px;
padding: 10px;
margin: 10px;
border: 2px solid black;
background : Silver;
float : left;
}
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exercitation ulliam corper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Come si vede, un modo elegante per costruire dei box incorporati nel testo.
La proprietà clear fa in modo che al fianco di un elemento per cui sia stata impostata non possano comparire altri elementi con float.
Nel primo esempio abbiamo applicato il float alla nostra solita immagine. Il titolo H1 si comporta di conseguenza mettendosi al suo fianco.
Sotto invece abbiamo applicato al titolo questa classe:
h1.clear {
clear : left;
}
Come conseguenza impediamo all'immagine di stare al suo fianco sinistro.