Clear

Facciamo pulizia La Proprietà clear, già spiegata nell’articolo inerente alla clearance, consente all’elemento a cui viene applicata di posizionarsi immediatamente […]
Clear

Facciamo pulizia

La Proprietà clear, già spiegata nell’articolo inerente alla clearance, consente all’elemento a cui viene applicata di posizionarsi immediatamente dopo un elemento flottante, annulando per esso e per i successivi elementi la regola del float.

I principali metodi

Ti illustro i principali metodi per mettere in pratica questa proprietà:
Questa prima porzione di css ci seguirà lungo il nostro percorso. Qui definisco l’azzeramento di margini e padding tramite il selettore universale per evitare qualsiasi tipo di discrepanza tra i browser e definisco due classi entrambe relative a due div flottanti. Nei successivi step non riproporrò nuovamente queste regole, ma verranno definite solo le variazioni relative al caso che sto analizzando.

* {
    margin:0;
    padding:0;
}
.left {
    width: 50%;
    float: left;
}
.right {
    width: 50%;
    float: right;
}

Primo Metodo

Il primo metodo, “il vecchio metodo”, consiste nel creare, prima della chiusura del container, un div con classe clear, per annullare il float del precedente elemento. In questo caso è stato utilizzato un div, che se non specificato, ha di default l’altezza pari a zero. É possibile utilizzare qualsiasi altro elemento html, ma bisogna stare attenti a definire le giuste proprietà css affinchè non influisca sul nostro layout.

.clear {
    clear:both;
}

Secondo Metodo

II secondo metodo consiste nel far flottare il contenitore e dargli una larghezza 100% o tale, da impedire ad altri elementi di accodarsi. I CSS 2.1 hanno chiarito un aspetto fondamentale: un elemento fluttuante si espandrerà per contenere qualsiasi discendente fluttuante. Potrebbe non essere possibile per motivi strutturali attribuire il float e la larghezza al 100%, quindi questo metodo è da ponderare bene in base alle proprie esigenze.

#container {
    float:left;
    width:100%;
}

Terzo Metodo

Il Terzo metodo, definito anche “easy clearing”, non prevede la creazione di nessun elemento strutturale aggiuntivo ma solo di due regole css per il div container. Il metodo overflow hidden, richiede precisione affinchè i box al suo interno non fuoriescano in nessun caso altrimenti i contenuti verranno tagliati. La width o la height infine sono necessari affinchè venga attivato la modalità “haslayout”, che verrà spiegata in un successivo articolo, per IE.

#container {
    overflow: hidden;
    width:300px; /* Qualsiasi larghezza, sia definita in pixel che in percentuale va bene. */
}
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github