Elements flotants
La propietat float
La propietat float obliga a l'element a "flotar" sobre el flux normal de posicionament de la resta d'elements cap a una de les dues direccions possibles: esquerra (float: left) o dreta (float:right). Segons el W3C
(ref.), els valors que pot prendre la propietat float són:
-
left: L'element flotant actua com a bloc i flota cap a l'esquerra. El contingut flueix per la dreta de la caixa flotant, començant per dalt. -
right: Molt semblant al valorleft, però flotant cap a la dreta. El contingut flueix per l'esquerra, començant per la part superior. -
none: L'element no flota.
Referent a aquesta propietat es poden destacar alguns comportaments com els següents:
- Quan un element flotant no es pot alinear horitzontalment amb un altre element flotant, s'ubicarà a sota d'aquest.
- La posició d'un element flotant, la seva mida, marges, vores i padding, afecten a la posició dels altres elements flotants, com qualsevol altre contingut en línia adjacent.
- Mai es pot predeterminar la ubicació precisa d'un element flotant.
Veieu el següent exemple obrint l'arxiu float.html.
Podeu veure que l'element model_box_1 té la propietat float: left;, que permet que el paràgraf que el segueix flueixi per la seva dreta. Si a la propietat float se li donés el valor none, l'element model_box_1 tornaria al flux normal del document.
De la mateixa manera, fixeu-vos que l'element model_box_2 té la propietat float: right;, provocant que els elements que el segueixen flueixin per la seva esquerra.
La propietat clear
La propietat clear anul·la l'efecte de la propietat float, retornant al flux normal del document. Pot prendre dos valors: left o right segons sigui el valor flotant de l'element precedent.
Veieu el que passa amb l'exemple anterior quan s'afegeix a la regla .model_box_4 la propietat: clear: right;.
