Lez.9 - Corso Avanzato Css

La Proprietà Clear e le Immagini Fluttuanti

Clear e Immagini Fluttuanti

Passiamo subito alla pratica con la spiegazione del codice riportato qui sotto.

Diciamo subito che se volgiamo che ci sia accanto all'immagine solo il primo e il secondo paragrafo e non in terzo paragrafo, dobbiamo dire al terzo paragrafo di non accettare elementi fluttuanti, in questo caso, alla sua sinistra.

La proprietà che ci viene in aiuto è la proprietà clear (chiaro, pulito, cancellato) che va ad annullare il float a sinistra come si vede dalla classe topolino (.topolino) riferita al Paragrafo 3 al quale la abbiamo assegnata.

Il Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>Clear e Le Immagini Fluttuanti</title>
  <meta charset="utf-8">
  <style type="text/css">
    img {
	    float: left;
	    margin: 0 10px 10px 0;
    }
    .topolino {
	    clear:left;
    }
    p {
	    text-align: justify;
    }
  </style>
 </head>
 <body>
   <h1>Clear e Le Immagini Fluttuanti</h1>
   <img src="vostra_immagine.jpg">
   <p>Paragrafo 1 - Questo è un testo fatto a caso per far vedere con la proprietà float come un'immagine fluttua.</p>
   <p>Paragrafo 2 - Questo è un testo fatto a caso per far vedere con la proprietà float come un'immagine fluttua.</p>
   <p class="topolino">Paragrafo 3 - Questo è un testo fatto a caso per far vedere come funziona la proprietà clear la quale non accetta, alla sua sinistra, nessuna immagine fluttuante.</p>
 </body>               
</html>