Lez.8 - Corso Avanzato Css

La Proprietà CLEAR in un foglio di stile Css

La Proprietà clear

Lo scopo della proprietà clear è quello di risolvere un problema dato da elementi impostati con float.
Tale problema è che float sposta un elemento estraendolo dal flusso del documento, ed è possibile che l'elemento si trovi in posizioni non volute, magari trovandosi al fianco di altri elementi che noi desideriamo stiano invece separati da esso.

A tale scopo ci viene in aiuto la proprietà clear, che serve proprio a questo, ad impedire che al fianco di un elemento appaiano altri elementi impostati con float.

Sintassi: clear: valore;

I valori che accetta la proprietà clear sono:
left: l'elemento non accetta elementi flottanti alla sua sinistra.

right: l'elemento non accetta elementi flottanti alla sua destra.

both: both (entrambi) l'elemento non accetta elementi flottanti su entrambi i lati.

inherit: inherit (ereditato) significa che clear eredita dal contenitore padre.

none: none (nessuno) valore di defaut significa che clear è disabilitato.
Un'altro problema dato da float è quello che se il contenuto (elementi figli) di un contenitore padre a tutti questi elementi figli assegnamo una proprietà float, notiamo che il contenitore padre non avendo più contenuto, collassa in verticale.

Per evitare e risolvere questo problema al contenitore padre, esistono almento tre metodi:
Primo Metodo: andiamo ad assegnare un overflow (straripamento) auto o hidden (nascosto) al contenitore padre.

Secondo Metodo: inserisco un div o un paragrafo, prima della chiusura del contenitore padre, purchè sia un elemento di blocco, che sia vuoto, e la proprietà clear sia impostato sul lato, o eventualmente su entrambi i lati, su cui ripristinare il flusso normale del documento.
Terzo Metodo: creo nel foglio di stile uno speciale pseudo elemento che andrò ad inserire prima della chiusura del div padre.
Per essere più chiaro:
#padre::after - creo uno pseudo elemento e nel blocco delle proprietà dichiaro:
- clear:both; cancella il float su entrambi i lati

- content: ""; (contents contenuto) inserisci questo contenuto vuoto

- display: block; che l'elemento vuoto che ho creato sia inteso (visto) come elemento di blocco.

Il Codice:
<!DOCTYPE html>
<html lang="it">                     
 <head>			    
  <title>La proprietà clear</title>
  <meta charset="utf-8">
  <style type="text/css">
    #padre {
	    background-color: yellow;
	    border: 2px solid black;
	    /* overflow: hidden; (primo metodo)*/
    }
    #uno {
	    background-color: coral;
	    width: 150px;
	    height: 150px;
	    float: right;
    }
    #due {
	    background-color: aquamarine;
	    width: 150px;
	    height: 150px;
	    float: right;
    }
    #tre {
	    background-color: cornflowerblue;
	    width: 150px;
	    height: 150px;
	    float: left;
    }
    /* #vuoto {
	    clear: both;
	    display: block;
    } (secondo metodo)*/
    #padre::after {
	    clear: both;
	    content: "";
	    display: block;
	    /*(terzo metodo)*/
    }
  </style>
 </head>
 <body>
   <div id="padre">
	   <div id="uno">
	   UNO
		</div>
		<div id="due">
	   DUE
	   </div>
	   <div id="tre">
	   TRE
	   </div>
	
     <!-- (secondo metodo) -->
     <!--  <div id="vuoto" ></div>  --> 
	    
   </div>
 </body>               
</html>