i box e il visual formatting model
http://www.w3.org/TR/REC-CSS2/visuren.html
il visual formatting model descrive come lo UA (User Agent=browser) elabora l'albero dei documenti: ogni elemento genera da zero a n BOX, che vengono posizionati nella pagina in funzione del tipo e delle dimensioni del box, dello schema di posizionamento, della relazione tra gli elementi del documento e da eventuali informazioni esterne (es.: le immagini).
Gli elementi di una pagina sono di due tipi: BLOCK-LEVEL e INLINE e possono essere anomini o avere un nome (definito nel foglio di stile)
geometria
dall'esterno: margine, bordo, padding, testo del blocco
dall'interno: testo del blocco, padding, bordo, margine
tutti i dettagli in http://www.w3.org/TR/REC-CSS2/box.html
la proprietà display
specifica il tipo di blocco:
inline | block | list-item | run-in | compact | marker | table | inline-table | table-row-group | table-header-group | table-footer-group | table-row | table-column-group | table-column | table-cell | table-caption | none | inherit
la proprietà position
static | relative | absolute | fixed | inherit
la proprietà float
left | right | none | inherit
la proprietà clear
none | left | right | both | inherit
la proprietà z-index
auto | <integer> | inherit la proprietà 'z-index' property specifica il livello di stack del blocco e se il blocco crea un contesto di stack locale
la relazione tra 'display', 'position', and 'float'
Le tre proprietà che influenzano la generazione e la visualizzazione dei box interagiscono come segue:
  • se 'display' ha valore 'none', gli UA devono ignorare 'position' e 'float' e non viene generato alcun box
  • altrimenti, se 'position' ha il valore 'absolute' o 'fixed', 'display' è settato a 'block' e 'float' è settato a 'none'. La posizione del box è determinata dalle proprietà 'top', 'right', 'bottom' e 'left'.
  • altrimenti, se 'float' ha valore diverso da 'none', 'display' è settato a 'block' e il blocco fluttua.
  • altrimenti si applicano le rimanenti proprietà di 'display' come specificate.
Si noti che CSS2 non specifica il comportamento del layout se i valori di queste proprietà viene cambiato da scripts.
per confronto tra il flusso normale, float e il posizionamento assoluto, si veda http://www.w3.org/TR/REC-CSS2/visuren.html#comparison