Clearance

Le dinamiche del clear Oggi voglio parlarti della clearance, un aspetto un pò particolare introdotto nei CSS Versione 2 Revisione […]
Clearance

Le dinamiche del clear

Oggi voglio parlarti della clearance, un aspetto un pò particolare introdotto nei CSS Versione 2 Revisione 1. Riguarda il clear degli elementi e più in particolare le dinamiche che regolano la spaziatura verticale tra un elemento flottante e un elemento con la proprietà clear impostata.

In teoria cosa accade

Come ormai è risaputo, qualsiasi elemento con la proprietà float assegnata, viene “parzialmente” estratto dal flusso del documento. L’elemento float assume tutte le caratteristiche di un elemento blocco ma se ad esso gli viene attribuita una larghezza inferiore del suo contenitore padre, questo, consente ai successivi elementi di scivolargli attorno, di flottare intorno al suo riquadro. L’unica proprietà che puo interrompere questo comportamento è appunto clear. Quando viene applicata, tale proprietà consente all’elemento di posizionarsi immediatamente dopo un elemento flottante, annulando per esso e per i successivi elementi la regola del float.

Che alternative abbiamo?

Nella pratica, cosa accade all’elemento a cui viene applicato il clear? Fino ai CSS Versione 2 il clear consisteva nell’aumento (in automatico) del margine superiore in modo che l’arera di contenuto si posizionasse subito sotto il limite inferiore di un elemento fluttuante. La Clearance, introdotta dai CSS Versione 2 Revisione 1 (CSS 2.1), consiste in una spaziatura supplementare (in aggiunta al margine superiore di cui ti parlavo prima) per fare in modo che sempre e comunque, un elemento con clear venga spinto oltre qualsiasi elemento fluttuante. Questo significa che qualsiasi margine superiore venga attribuito manualmente ad un elemento che abbia la proprietà clear impostata, viene automaticamente ignorato.

I metodi per garantire un minimo di spaziatura verticale tra un elemento clear e un elemento flottante sono i seguenti:

  1. Dare il margin bottom allo stesso elemento flottante.
  2. Se la grafica lo consente, dare il padding-top dell’elemento clear.
  3. Se invece conosci a priori l’esatta altezza degli elementi fluttuanti (cosa molto rara), potresti evitare di attribuire la proprietà clear e di contro attribuire un margine superiore di quanto basta per scapolare gli elementi flottanti e garantirti nel contempo un pò di spaziatura.
Search
Tags
Seleziona rubrica
Seleziona rubrica
Codice Github