Elementi flottati.

La proprietà “float” consente di posizionare i box uno accanto all'altro sulla stessa linea. Con questa proprietà gli elementi vengono rimossi dal normale flusso dell'html che altrimenti vedrebbe i box sistemarsi uno sotto l'altro. Vediamo come funziona.

Disegniamo un box contenitore di colore nero al cui interno sistemiamo 3 box di colore con fondo rosso e il bordo bianco.

Codice:
Nel body della pagina web scriviamo:

<div class="cont">
	<div class="sx">float sx </div>
	<div class="sx">float sx </div>
	<div class="sx">float sx </div>
        
</div>

Nel css scriviamo:

.cont {
	width: 300px;
	height:50px;
	background-color:#000000;
}
.sx{
	width: 100px;
	float:left;
	background-color:#ff0000;
}

Risultato:

immagine box flottati

I box rossi si dispongono uno accanto all'altro dentro il contenitore nero. Tutti e 3 i box hanno la float impostata su left.

Vediamo adesso come si comportano 2 box con float diverse, uno a sinistra e uno a destra.

Codice:
Nel body della pagina web scriviamo:

<div class="cont">
	<div class="sx">float sx </div>
	<div class="dx">float dx </div>
</div>

Nel css che abbiamo creato precedentemente aggiungiamo la classe di stile per il box di destra avente il fondo verde:

.dx{
	width: 100px;
	float:right;
	background-color:#00ff00;
}

Risultato:

immagine box flottati

Il box rosso rimane disposto a sinistra del contenitore, mentre quello verde si dispone a destra.

Adesso vediamo come posizionare sotto questi 2 box, un'altra fila di box floattati. Per fare questo dobbiamo prima interrompere lil flusso di elementi floattati tramite la proprietà “clear”. Essa serve a “ripulire" la float ripristinando il normale flusso dell'html. Ciò significa tornare al posizionamento dei box uno sotto l'altro. La proprietà “clear” può essere impostata su “left”, “right” oppure “both”. La prima ripulisce la float impostata su left, la seconda quella impostata su right, mentre la terza ripulisce entrambe le float.

Codice:
Nel body della pagina web aggiungiamo un div (avente la classe pippo) e subito sotto ripetiamo i 2 div floattati. Scriviamo:

<div class="cont">
	<div class="sx">float sx </div>
	<div class="dx">float dx </div>
      <div class="pippo"> </div>
      <div class="sx">float sx </div>
	<div class="dx">float dx </div>
</div>

Abbiamo inserito un div, avente la classe “pippo”, fra le 2 file di box floattati (il nome della classe è arbitrario). Il div pippo risulterà invisibile non avendo contenuto al suo interno.

Nel css che abbiamo creato precedentemente aggiungiamo la classe di stile per il div clear scrivendo:

.pippo {
	clear:both;
}

Risultato:
immagine box flottati

Le 2 file di box floattati, intervallati dal div pippo, si posizionano correttamente una sotto l'altra rispettando le posizioni. Il div pippo risulterà invisibile non avendo contenuto al suo interno.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *