MDN wants to learn about developers like you: https://qsurvey.mozilla.com/s3/MDN-dev-survey

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

Originalment per a les imatges flotants dins de blocs de text, la propietat float s'ha convertit en una de les eines més utilitzades per crear diversos dissenys de columnes en les pàgines web. Aquest article ho explica tot.

Requisits previs: Conceptes bàsics d'HTML (estudi Introducció a HTML), i una idea de com funciona CSS (estudi Introducció a CSS).
Objectiu: Obtenir informació sobre com crear funcions flotants, com ara majúscules, imatges flotants i dissenys de columnes múltiples a les pàgines web.

El fons dels flotadors

Originalment, la propietat float es va introduir per permetre els desenvolupadors web implementar dissenys simples que incloguessin una imatge flotant dins d'una columna de text, amb el text envoltat per l'esquerra o la dreta. El tipus de cosa que podria obtenir en un disseny de periòdic.

Però els desenvolupadors web es van adonar ràpidament que podian flotar qualsevol cosa, no només imatges, de manera que l'ús del flotador es va ampliar. El nostre exemple de paràgraf de fanatsia, d'abans del curs, mostra com es pot utilitzar flotant (float) en la creació d'un efecte de lletra capitular divertit.

Els flotadors s'utilitzen molt habitualment, en aquests dies, per crear dissenys de llocs web sencers amb múltiples columnes d'informació flotants perquè s'asseguin un al costat d'un altre (el comportament predeterminat seria que les columnes s'assentessin una sota l'altra, en el mateix ordre en que apareixen a la font ). Hi ha disponibles noves tècniques de disseny millor, que explorarem més endavant en aquest mòdul, però els flotadors segueixen sent un favorit antic, ja que són compatibles des d'Internet Explorer 4.

Un exemple senzill de flotador

Explorem com utilitzar flotadors. Començarem amb un exemple realment senzill, que consisteix a flotar un bloc de text al voltant d'una imatge. Podeu seguir endavant, creant un nou fitxer index.html en el vostre ordinador, omplint-lo amb una senzilla plantilla HTML, i inserint el codi que hi ha a sota, en els llocs adequats. A la part inferior de la secció podeu veure un exemple en viu del que semblarà el codi final.

En primer lloc, començarem amb un codi HTML senzill - afegiu el següent al vostre cos HTML, tot eliminant allò que hi havia abans:

<h1>Simple float example</h1>

<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="A pretty butterfly with red, white, and brown coloring, sitting on a large leaf">

<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. 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 apliqueu el següent CSS al vostre HTML (utilitzant un element <style> o un <link> en un fitxer .css separat - a la vostra elecció):

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

p {
  line-height: 2;
  word-spacing: 0.1rem;
}

Si ara deseu i actualitzeu, veureu algo semblant al que esperàveu - la imatge està asseguda sobre el text, que actualment es veu una mica lletja. Podríem centrar-la en el seu contenidor, però al contrari, flotarem el text que l'envolta utilitzant un flotador. Afegiu la següent regla a sota de les regles anteriors:

img {
  float: left;
  margin-right: 30px;
}

Ara, si deseu i actualitzeu, veureu algo semblant al següent:

Per tant, pensem en com funciona el float - l'element amb el flotador establert (l'element <img>) en aquest cas) es treu del flux de disseny normal del document i s'adhereix al costat esquerre del contenidor pare (<body>, en aquest cas). Qualsevol contingut que es trobi per sota de l'element flotant en el flux de disseny normal ara l'envoltarà, omplint l'espai al costat dret del mateix fins a la part superior de l'element flotant. Allà, s'aturarà.

Tingueu en compte que el contingut flotant encara obeeix al comportament normal de la caixa, amb coses com el marge i les vores. Posem algo de marge a la part dreta de la imatge per evitar que el text que hi ha a la dreta no s'assegui just al seu costat.

Flotar el contingut a la dreta té exactament el mateix efecte, però a l'inrevés - l'element flotant s'adhereix a la dreta i el contingut s'embolicarà al voltant a l'esquerra. Proveu de canviar el valor de float a right i reemplaceu margin-right amb margin-left a l'últim conjunt de regles i vegeu el resultat.

Revisant el nostre exemple de lletra capitular

Com es va esmentar anteriorment, el nostre exemple de paràgraf fantàstic, d'abans del curs, va mostrar una bonica lletra capitular Per a aquest exemple, tenim un únic paràgraf senzill:

<p>This is my very important paragraph.
 I am a distinguished gentleman of such renown that my paragraph
 needs to be styled in a manner befitting my majesty. Bow before
my splendour, dear students, and go forth and learn CSS!</p>

El nostre CSS es veu així:

p {
  width: 400px;
  margin: 0 auto;
}

p::first-line {
  text-transform: uppercase;
}

p::first-letter {
  font-size: 3em;
  border: 1px solid black;
  background: red;
  float: left;
  padding: 2px;
  margin-right: 4px;
}

I el resultat directe és el següent:

L'efecte aquí no és molt diferent del que teníem en el nostre primer exemple amb la imatge - aquesta vegada, però, estem flotant la resta del paràgraf al voltant de la seva primera lletra, després de fer que la lletra en qüestió sembli gran i atrevida i interessant.

Podeu flotar pràcticament qualsevol cosa al voltant de qualsevol altra cosa, sempre que hi hagi espai per a tots dos elements perquè encaixin un al costat de l'altre. Això ens porta, molt bé, a parlar sobre dissenys de múltiples columnes.

Múltiples columnes de disseny flotants

Els flotadors s'utilitzen habitualment per crear dissenys de  múltiples columnes i han estat durant força temps, a causa de la seva àmplia compatibilitat, amb el navegador. Això és, perquè malgrat tot no estaven realment destinats per a aquest treball, tinguen alguns efectes secundaris estranys que s'han de tractar, com veureu més endavant en l'article.

Un disseny de dues columnes

Comencem amb l'exemple més senzill possible - un disseny de dues columnes. Podeu seguir endavant, creant un nou fitxer index.html en el vostre ordinador, omplint-lo amb una senzilla plantilla HTML, i inserint el codi que hi ha a sota, en els llocs adequats. A la part inferior de la secció podeu veure un exemple en directe del que semblarà el codi final.

En primer lloc, necessitem contingut per introduir a les nostres columnes. Reemplaceu el que hi hagi dins del cos actualment amb el següent:

<h1>2 column layout example</h1>
<div>
  <h2>First column</h2>
  <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. 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>
</div>

<div>
  <h2>Second column</h2>
  <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>
</div>

Cadascuna de les columnes necessita un element extern per contenir el seu contingut i permetre manipular-ho tot alhora. En aquest exemple, hem triat <div>s, però podeu triar algo més semànticament apropiat com <article>s, <section>s i <aside>, o el que sigui.

Ara, per al CSS. Primer de tot, apliqueu el següent al vostre HTML per proporcionar una configuració bàsica:

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

El cos tindrà un 90% d'ample de la finestra de visualització fins que arribi a 900px d'amplada, en aquest cas es mantindrà fixat en aquest ample i es centrarà a la finestra de visualització. Per defecte, són fills (el <h1> i els dos <div>s) abastaran el 100% de l'amplada del cos. Si volem que els dos <div>s siguin flotants un al costat de l'altre, hem de fixar el seu ample al total del 100% de l'ample del seu element pare o més petit perquè puguin cabre un al costat de l'altre. Afegiu el següent a la part inferior del vostre CSS:

div:nth-of-type(1) {
  width: 48%;
}

div:nth-of-type(2) {
  width: 48%;
}

Aquí hem establert que tots dos siguin el 48% de l'ample dels seus pares, que totalitza el 96%, deixant un 4% lliure per actuar com un canal entre les dues columnes, donant al contingut un espai per respirar. Ara només hem de flotar les columnes, així:

div:nth-of-type(1) {
  width: 48%;
  float: left;
}

div:nth-of-type(2) {
  width: 48%;
  float: right;
}

Posar tot això junt ha de donar-nos un resultat com aquest:

Notareu aquí que estem utilitzant percentatges per a tots els amples - aquesta és una bona estratègia, ja que crea un disseny líquid (liquid layout), que s'ajusta a diferents mides de pantalla i manté les mateixes proporcions per als amples de les columnes en mides de pantalla més petites. Intenteu ajustar l'amplada de la finestra del vostre navegador perquè ho vegeu vosaltres mateixos. Aquesta és una eina valuosa per al disseny web sensible, que veurem més endavant en un mòdul futur.

Nota: Podeu veure aquest exemple executant-se a 0_two-column-layout.html (vegeu també el codi font).

Una cosa que necessiteu saber, és que les columnes poden començar a semblar terribles quan realment es fan estretes. En general, té sentit tornar a un disseny de columna únic per a pantalles estretes (com ara telèfons mòbils), que es pot aconseguir utilitzant consultes de medis. De nou, aprendreu sobre aquests, en el futur mòdul de disseny web sensible.

L'altra opció seria establir els amples en una unitat fixa, com ara rems o píxels - podeu veure un exemple en two-column-layout-fixed.html (vegeu el codi font), o convertir el vostre propi exemple eliminant la declaració max-width i canviar els amples a 900px, 430px i 430px respectivament.  Això s'anomena disseny de amplada fixa (fixed-width layout) - si ajusteu la mida del vostre navegador ara, veureu que el disseny ja no s'ajusta a l'amplada de la finestra de visualització, i haureu de desplaçar-vos per veure-ho tot a mides més petites.

Ens centrarem en els dissenys líquids per ara.

Un disseny de tres columnes

Una vegada que tingueu un disseny de dues columnes funcionant, afegiu una tercera columna (o més), no és massa difícil. Només cal que afegiu una altra columna dins del mateix element pare que les altres. Comenceu afegint el següent <div> just després dels altres dos (o utilitzeu 0_two-column-layout.html com a punt de partida):

<div>
  <h2>Third column</h2>
  <p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.</p>
</div>

Ara actualitzeu el CSS al següent:

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

div:nth-of-type(1) {
  width: 36%;
  float: left;
}

div:nth-of-type(2) {
  width: 30%;
  float: left;
  margin-left: 4%;
}

div:nth-of-type(3) {
  width: 26%;
  float: right;
}

Això ens donarà el següent resultat:

Aquí hi ha molt poc que no hem vist abans; L'única diferència real és que tenim aquesta columna addicional per fer front: per aconseguir que s'assegui al lloc correcte l'hem flotat a l'esquerra; també li hem donat un margin-left del 4%, per crear un canal entre la primera i la segona columna. Hem fixat l'amplada de la columna perquè totes s'ajustin - 36% + 30% + 4% + 26% = 96%, deixant un restant del 4% per formar un canal entre la segona i tercera columna (aquest canaló natural, sempre apareixerà en el punt entre les columnes flotan esquerra i flotant dreta, sempre que sigui).

Una cosa a tenir en compte aquí, és que heu de pensar acuradament sobre l'ordre d'origen en que col·loqueu les columnes, i com flotar, per obtenir el resultat desitjat. El vostre contingut tindrà sentit, de totes maneres, quan ho llegiu en el seu ordre d'origen (penseu en una persona amb discapacitat visual que utilitzi un lector de pantalla per escoltar el vostre contingut - com el disseny del seu contingut no fa cap diferència per a ells), però també heu de tenir en compte que el contingut flotat anteriorment en l'ordre d'origen també apareixerà més amunt en l'ordre dels elements flotants, així, més a l'esquerra, en el cas dels flotadors a l'esquerra, i més a la dreta, en el cas de flotadors a la dret. Per il·lustrar el que volem dir, proveu de canviar el valor de float per a la segona columna a la dreta (o feu un cop d'ull a three-column-layout-wrong-order.html (codi font). Veureu que l'ordre ara surt com això:

div1  div3  div2

Això és degut a que el segon <div> és major en l'ordre d'origen que el tercer <div>, de manera que apareixerà més amunt en l'ordre flotant - ja que tots dos estan flotant a la dreta, això significa que el segon <div> apareixerà més a la dreta que el tercer <div>.

Nota: Podeu trobar l'exemple acabat fins a aquest punt en 1_three-column-layout.html (vegeu el codi font).

Netjar flotadors

A hores d'ara, ja heu començat a veure com de divertits poden ser els flotadors. Tanmateix, aviat començareu a trobar un problema - qualsevol contingut que aparegui sota dels flotadors que no s'hagin flotat s'embolicaran al voltant dels elements flotants, podent començar a tenir un aspecte terrible si no es tracta. Per il·lustrar el que volem dir, intenteu afegir el següent HTML sota el vostre tercer element <div> (i doneu-li una ullada 2_float-disaster.html (codi font)):

<footer>
  <p>&copy;2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you wish.</p>
</footer>

Veureu que el peu de pàgina s'ajusta a l'espai al costat de la columna més llarga, es veu terrible - realment volem que el peu de pàgina es mantingui a la part inferior, a sota de totes les columnes. Bé, afortunadament hi ha una manera fàcil de resoldre aquest problema - la propietat clear. Quan s'aplica a un element, bàsicament li diu "deixar de flotar aquí" - aquest element i els que hi ha després d'ell a la font, no flotaran, tret que s'apliqui una nova declaració float a un altre element més endavant.

Per solucionar el problema, afegiu la següent regla al vostre CSS:

footer {
  clear: both;
}

Això us donarà un peu de pàgina que es comporta i es troba sota les columnes, com hauria de ser:

clear pot prendre tres valors:

  • left: Atura qualsevol flotador esquerra actiu
  • right: Atura qualsevol flotador dret actiu
  • both: Atura qualsevol flotador esquerra i dret actiu

En general, només voldreu establir clear: both a l'element on voleu que s'aturi el flotant; En alguns casos, només voldreu cancel·lar una citació left or right.

Nota: Podeu trobar l'exemple en aquesta etapa a 2a_fixed-by-clear.html (vegeu el codi font).

Problemes de flotació (Float)

Les seccions anteriors han proporcionat una base per crear dissenys senzills amb flotadors, però hi ha alguns problemes que cal abordar. Anem a tractar els problemes principals.

L'ample sencer pot ser complicat de calcular

Els nostres exemples fins ara ens han mostrat caixes flotants que no tenen estil aplicat - això és fàcil. Els problemes comencen a venir quan volem donar estil a aquestes caixes - afegint fons, vores, farcits, etc. Per il·lustrar el problema, intenteu afegir el següent, al vostre CSS (també podeu veure l'exemple a 3_broken-layout.html (codi font)):

div, footer {
  padding: 1%;
  border: 2px solid black;
  background-color: red;
}

En aquest punt, veureu que el vostre disseny s'ha trencat, a causa de l'amplada addicional introduïda pel farciment i la vora, les tres columnes ja no caben en una línia, de manera que la tercera columna cau per sota de les altres dues. Ay!

Hi ha algunes maneres de solucionar-ho. La millor manera és afegir el següent al vostre CSS:

* {
  box-sizing: border-box;
}

box-sizing arriba al nostre rescat, fent que el model de caixa canviï perquè l'ample de la caixa es prengui com a contingut + farcit + vora, no només contingut, de manera que afegir farcit i vora no farà la caixa més ampla - simplement farà que el contingut sigui més estret per acomodar.

En aquest punt, tenim un altre problema: el peu de pàgina pressiona directament contra la columna més llarga, que no és l'ideal. Intenteu solucionar-ho donant-li al peu de pàgina margin-top per anar juntament amb la seva compensació:

footer {
  clear: both;
  margin-top: 4%;
} 

Tanmateix, això no funciona - els elements flotants existeixen fora del flux normal de disseny del document i es comporten d'una manera estranya en alguns aspectes:

  • Per començar, l'àrea on habiten dins dels seus elements pares té una alçada efectiva de 0 - proveu de carregar 1_three-column-layout.html al navegador i comproveu l'alçada de l'element <body> utilitzant les eines de desenvolupador, i veureu el que volem dir - l'alçada del cos només es informada com l'alçada de <h1>. Això es pot solucionar de diverses maneres, però en l'única cosa en què confiem es esborrar el flotador a la part inferior del contenidor principal, tal com hem fet en el nostre exemple actual. Si comproveu l'alçada del cos en el vostre exemple actual, hauríeu de veure que la seva alçada s'està comportant.
  • En segon lloc, no podeu utilitzar marges en elements no flotants per crear espai entre ells i elements flotants - aquest és el problema immediat que tenim aquí i implementarem una solució a continuació.
  • Hi ha algunes altres coses estranyes sobre els flotadors - All About Floats, l'excel·lent article de Chris Coyier, tracta d'altres, a més de correccions.

Per tant, solucionem això. Primer, afegiu el següent nou <div> a l'HTML, just a sobre del peu de pàgina:

<div class="clearfix"></div>

Afegir una "clearfix div" invisible després dels flotadors que voleu netejar, és molt útil si no teniu disponible un element per netejar els flotadors (com ara el nostre peu de pàgina), però també és útil aquí. La propera cosa que ens agradaria fer és moure clear: both; declaració de la regla que és l'estil del nostre peu de pàgina, i col·locar-ho en el lloc clearfix div:

.clearfix {
  clear: both;
}

Tenim un bon marge superior al nostre peu de pàgina ara, però també tenim un altre problema - el clearfix div està rebent el mateix fons, farcit i vora que les columnes i el peu de pàgina. Per solucionar-ho, primer oferim a cadascun dels nostres divs de columna una class de column:

<div class="column">
  ...
</div>

Ara anem a canviar la nostra regla que aplica l'estil de caixa als divs i al peu de pàgina, de manera que només la columna divs sigui d'estil:

.column, footer {
  padding: 1%;
  border: 2px solid black;
  background-color: red;
}

Això només ho arregla ara com ara.

Nota: L'exemple final, fixat, en aquesta etapa es pot veure en 4_fixed-layout-border-box.html (codi font).

Un altre petit punt a destacar és que box-sizing funciona des d'Internet Explorer 8 - si necessiteu explícitament suport per a navegadors antics, és possible que hàgiu d'ajustar els amples de la columna manualment per permetre el farciment i els amples de la vora. Aquesta no és una tècnica molt exacta, sobretot tenint en compte que no es poden ajustar les mides de les vores utilitzant percentatges - només ha de permetre l'espai suficient mentre s'omple l'ample dels pares, tant com sigui possible. Podeu veure aquesta solució en acció en fixed-layout-adjusted-percentages.html (vegeu el codi font).

Alçada de fons dels elements flotants

Així doncs, l'exemple que hem construït fins ara funciona, però un altre problema és que les alçades de les columnes són diferents - es veuria molt millor si totes les columnes tinguessin la mateixa alçada.

Podem arreglar-ho donant a totes les columnes un height fixa (vegeu 5_fixed-height-columns.html (codi font)):

.column {
  height: 550px;
}

Tanmateix, això no és ideal en moltes situacions - fa que el disseny sigui inflexible. Està bé si podeu garantir que les columnes sempre tindran la mateixa quantitat de contingut, però això no sempre és el cas - el contingut canvia regularment en molts tipus de llocs.

Aquest és exactament el tipus de problema que les noves tecnologies de disseny com flexbox s'han dissenyat per resoldre. Flexbox pot estirar automàticament columnes perquè siguin tan llargues com la columna més llarga.

També podeu considerar:

  1. Establint el color de fons de les columnes amb el mateix color de fons que la dels seus pares, de manera que no es pugui veure que les alçades són diferents. Aquesta és la millor opció en aquest moment.
  2. Configurant-los a una alçada fixa i fer que el contingut es desplaci usant overflow (vegeu la nostra secció sobre desbordament per veure un exemple).
  3. Utilitzant una tècnica anomenada columnes d'imitació - això implica treure el fons (i les vores) de les columnes reals i dibuixar un fons fals en l'element pare de la columna, que s'assembli als fons de la columna. Malauradament, això no seria capaç de gestionar les vores de la columna. Vegeu Faux Columns i Faux Columns for Liquid Layouts per a alguns tutorials útils sobre això.

Netejar flotadors pot arribar a ser complex

La neteja en el senzill exemple que hem construït al llarg de l'article és fàcil d'entendre, però la neteja pot arribar a ser molt més complexa a mesura que el disseny es fa més complex. Cal assegurar-vos de que es netegin tots els flotadors tan aviat com sigui possible per evitar que es produeixin problemes en el contingut de sota. Utilitzeu clearfix divs quan sigui necessari, si no teniu un contenidor convenient per deixar-ho net.

Resum

En aquest punt, ja hauríeu de tenir a la vostra disposició algunes poderoses eines per crear dissenys web bastant complexos. Excel·lent! En el següent article ho portarem encara més lluny mirant el posicionament.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,