float, clear i la repercussió en el col·lapse dels marges

El problema

Al tenir dos germans adjacents tals com:


<body>
   <div id="amb-float">
      amb float
   </div>
   <div id="amb-clear">
      amb clear
   </div>
</body>

on el primer —#amb-float— és una caixa flotant i el segon —#amb-clear— té un clear que neteja el float anterior, si s'afegeix un marge superior a la caixa #amb-clear aquest no actua.

És a dir, un CSS tal que:


#amb-float {
   float: left;
}
#amb-clear {
   clear: left;
   margin-top: 5em;
}

Un exemple del problema

La solució

Hi ha diverses solucions al problema. Només cal actuar com si es volgués evitar el col·lapse d'un marge, per tant es pot:

Afegir padding-top a la caixa pare dels dos germans adjacents.
Afegir border-top a la caixa pare dels dos germans adjacents.
Afegir un overflow: auto o overflow: hidden a la caixa pare dels dos germans adjacents que no sigui el body.

I perquè? és un bug o un comportament correcte?

Mirant les regles bàsiques que regeixen els col·lapses el cas que ens afecta no queda clar a l'especificació de CSS 2:

In this specification, the expression collapsing margins means that adjoining margins (no padding or border areas separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

8.3.1 Collapsing margins (CSS 2 Specification)

Però sembla resoldre-ho la de CSS 2.1:

In this specification, the expression collapsing margins means that adjoining margins (no non-empty content, padding or border areas or clearance separate them) of two or more boxes (which may be next to one another or nested) combine to form a single margin.

8.3.1 Collapsing margins (CSS 2.1 Specification)

Si agafem l'especificació de CSS 2.1 —en Working Draft— podriem dir que donat que la caixa #amb-clear porta un clear no és possible que col·lapsin els marges.

A més a més queda reforçada aquesta idea al llegir que:

An element that has had clearance applied to it never collapses its top margin with its parent block's bottom margin.

8.3.1 Collapsing margins (CSS 2.1 Specification)

El problema doncs queda reduït a l'especificació de CSS 2 que sembla no contemplar aquest cas. Però si llegim el comportament de les caixes flotants i el col·lapse de marges:

Vertical margins between a floated box and any other box do not collapse.

8.3.1 Collapsing margins (CSS 2 Specification)

En conclusió, té tota la pinta de ser una mala interpretació de l'especificació que s'haurà de resoldre sens dubte quan l'especificació de CSS 2.1 deixi d'estar en esborrany.

Recursos relacionats

Comentaris

Comentat per albertofs el 05/02/07

Una solución muy elegante es usar clearfix, lo defines en elementos comunes del CSS y le das la clase clearfix a cada bloque que contenga elemtos flotantes. Cómodo y eficaz.
Comentat per are el 05/02/07

mmm, crec que no és el cas. He afegit un exemple per il·lustrar-ho millor.
Comentat per Minid.net » Blog Archive » El modelo de cajas, segunda parte el 18/04/07

[...] float, clear i la repercussió en el col·lapse dels marges – Arnau Siches, 04/02/2007 (en catalán) [...]

Menú