Flotadors (Floats)

This translation is incomplete. Please help translate this article from English

Originalment pensada per a flotar imatges dins de blocs de text, la propietat float va esdevenir una de les eines més utilitzades per a crear dissenys multicolumna a les pàgines web. Amb l'arribada de Flexbox i Grid ha tornat ara al seu propòsit original, tal com s'explica en aquest article.

Requisits previs: HTML bàsic (vegeu Introducció a l'HTML), i una idea de com funciona CSS (vegeu Introducció a CSS.)
Objectiu: Aprendre a crear elements flotants a les pàgines web, i a fer servir la propietat clear i altres mètodes per a netejar els elements flotants.

La història dels elements flotants

La propietat float fou introduïda per a permetre als desenvolupadors implementar dissenys senzills que incloguessin una imatge flotant dins d'una columna de text, amb el text envoltant la part esquerra o dreta de la imatge. El tipus de cosa que trobes habitualment en el disseny d'un diari.

Però els desenvoupadors web aviat s'adonaren que podien flotar qualsevol cosa, i no només les imatges, pel que el seu ús s'amplià, per exemple, creant efectes de disseny divertits com els d'aquestes caplletres.

Els elements flotants han estat utitlitzats habitualment per a crear dissenys web complets amb múltiples columnes situades l'una al costat de l'altra (el comportament per defecte seria que les columnes se situessin les unes sota les altres, en el mateix ordre en què apareixen al codi font). Ara hi ha disponibles tècniques més modernes i millors, que explorarem més endavant en aquest mòdul, per la qual cosa l'ús de float d'aquesta manera s'hauria de contemplar com una tècnica antiquada.

En aquest article ens centrarem en l'ús apropiat de la propietat float.

Un exemple de float simple

Explorem com utilitzar els float. Començarem amb un exemple realment simple que inclou un bloc de text flotant al voltant d'un element. Pots acompanyar-nos creant un fitxer index.html al teu ordinador, omplint-lo amb una plantilla HTML simple, i inserint el codi següent als llocs adequats. Al final de la secció podràs veure un exemple en viu de com hauria de ser el codi final.

Primer, comencem amb una mica d'HTML simple — afegeix el següent al cos del teu HTML, eliminant qualsevol altra cosa que hi hagués abans:

<h1>Exemple simple de caixa flotant</h1>

<div class="box">Caixa flotant</div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. </p>
    
<p>Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

Ara aplica el següent CSS al teu HTML (fent servir un element <style> o un <link> per a separar el fitxer .css  — tu tries):

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif
}

.box {
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
}

Si deses y recarregues la pàgina, veuràs quelcom semblant a allò que esperaries: la caixa es troba per sobre del text, en un flux normal. Per a flotar el text al voltant, afegeix les propietats float i margin-right a la regla .box:

.box {
  float: left;
  margin-right: 15px;
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
}

Ara, si deses i recarregues, podràs veure alguna cosa semblant a això:

Analitzem ara com funciona el float — l'element amb el float aplicat (l'element <div> en aquest cas) és extret del flux normal del document i està enganxat al costat esquerre del seu element contenidor pare (<body>, en aquest cas). Qualsevol contingut que estigui per sota de l'element flotat en el flux normal, ara l'envoltarà, omplint l'espai a la dreta fins a la part superior de l'element flotant. Allà s'aturarà.

Flotar el contingut a la dreta té exactament el mateix efecte, però a la inversa — l'element flotat s'enganxarà a la dreta, i el contingut l'envoltarà per l'esquerra. Prova de canviar el valor de la propietat float a right i substitueix margin-right per margin-left al darrer conjunt de regles per veure el resultat.

Tot i que podem afegir un marge a l'element flotant per alunyar el text, no podem afegir un marge al text per allunyar-lo del flotant. Això es deu al fet que un element flotant s'extreu del flux normal i les caixes dels següents elements segueixen per darrera del flotador. Pots comprovar-ho fent alguns canvis a l'exemple.

Afegeix una clase special al primer paràgraf de text, el que succeeix immediatament a la caixa flotant, i després afegeix al teu CSS les següents regles. Això li donarà al paràgraf següent un color de fons.

.special {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
}

Per tal que l'efecte sigui més fàcil de veure, canvia el margin-right del teu element flotant a margin, per obtener espai al voltant de l'element flotant. Veuràs que el fons del paràgraf passa just per sota de la caixa flotant, com en l'exemple inferior.

Els quadres de línia del següent element s'han escurçat perquè el text discorri al voltant del flotador, però com que el flotador s'ha eliminat del flux normal, el quadre al voltant del paràgraf encara manté l'ample complet.

Netejant floats

Hem vist que el flotador s'elimina del flux normal i que els altres elements es mostraran al seu costat. Per tant, si volem evitar que un element a continuació es mogui cap amunt, hem de netejar el float. Això s'aconsegueix amb la propietat clear.

En l'HTML de l'exemple anterior, afegeix una classe cleared al segon paràgraf sota de l'element flotant. Després, afegeix això al teu CSS:

.cleared {
  clear: left;
}

Hauries de veure que el següent paràgraf neteja l'element flotant i ja no apareix al seu costat. La propietat clear accepta els següents valors:

  • left: neteja els elements flotats a l'esquerra.
  • right: neteja els elements flotats a la dreta.
  • both: neteja qualsevol element flotat, a l'esquerra o a la dreta.

Netejar la caixa contenidora d'un float

Ara ja saps com netejar un element que es troba a continuació d'un element flotant, però observa el que succeeix si tens un flotant alt i un paràgraf curt, amb una caixa convenidora que envolta ambdós elements. Modifica el teu document per tal que el primer paràgraf i la caixa flotant es trobin dins d'un <div> amb una classe wrapper.

<div class="wrapper">
  <div class="box">Caixa flotant</div>

  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate.</p>
</div>

Al teu CSS, afegeix la següent regla per a la teva classe .wrapper i després recarrega la pàgina:

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff; 
}

A més, elimina la classe .cleared anterior:

.cleared {
    clear: left;
}

Veuràs que, como en l'exemple on hem posat un color de fons al paràgraf, el color de fons passa per darrere de l'element flotant.

Un cop més, això és així perquè el flotador s'ha extret del flux normal. Netejar el següent elemento no ajuda a resoldre aquest problema de neteja de la caixa, on volem que la part inferior de la caixa envolti l'element flotant i que envolti el contingut fins i tot si el coningut és més curt. Hi ha tres maneres posssibles de resoldre això, dues que funcionen en tots els navegadors, però que tenen una mica de truc, i una tercera, nova manera de resoldre aquesta situació correctament.

El hack clearfix

La forma com aquesta situació s'ha tractat tradicionalment és utilitzant un truc conegut com el "truc clearfix". Això implica inserir algun contingut generat després de la caixa que conté el contingut flotant i envolvent, i configurar-lo per netejar ambdós.

Afefeix el següent CSS a l'exemple:

.wrapper::after {
  content: "";
  clear: both;
  display: block;
}

Ara recarrega la pàgina i la caixa hauria de netejar-se. Això és bàsicament el mateix que si haguessis afegit un element HTML com un <div> a sota dels elements i li haguessis afegit la propietat clear: both.

Fent servir overflow

Un mètode alternatiu és establir la propietat overflow de l'element contenidor amb un valor diferent de visible.

Elimina el CSS clearfix que has afegit en l'anterior secció i, en el seu lloc, afegeix overflow: auto a les regles de la caixa contenidora. Altre cop, la caixa hauria de netejar-se.

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
  overflow: auto; 
}

Aquest exemple funciona creant el que s'anomena un block formatting context (BFC) o context de format de bloc. És com un petit disseny dins de la nostra pàgina (dins la qual tot està contingut, per tant, el nostre element flotant està contingut dins del BFC i el fons es troba darrere d'ambdós elements. Això generalment funcionarà. Això no obstant, en certs casos, és possible que et trobis amb barres de desplaçament no desitjades o ombres retallades com a conseqüències no desitjades de l'ús del desbordament..

display: flow-root

La manera moderna de resoldre aquest problema és fer servir el valor flow-root de la propietat display. Això existeix només per a crear un BFC sense fer servir trucs; no hi haurà conseqüències no desitjades quan el facis servir. Elimina overflow: auto de la regla .wrapper i afegeix display: flow-root. Assumint que el teu navegador sigui compatible, la caixa es netejarà.

.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
  display: flow-root; 
}

Resum

Ara ja saps tot el que has de saber sobre els flotadors en el desenvolupament web modern. Consulta l'article sobre els mètodes de disseny antiquats per obtenir informació de com es feien servir, cosa que pot ser-te útil si has de treballar en projectes antics.

En aquest mòdul