path: root/files/ca/learn/css/disseny_css/flotadors/index.html

---
title: Flotadors (Floats)
slug: Learn/CSS/Disseny_CSS/Flotadors
tags:
  - Article
  - Beginner
  - CSS
  - Clearing
  - CodingScripting
  - Floats
  - Guide
  - Layout
  - columns
  - multi-column
translation_of: Learn/CSS/CSS_layout/Floats
---
<div>{{LearnSidebar}}</div>

<div>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</div>

<p>Originalment pensada per a flotar imatges dins de blocs de text, la propietat {{cssxref("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.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Requisits previs:</th>
   <td>HTML bàsic (vegeu <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>), i una idea de com funciona CSS (vegeu <a href="/ca/docs/Learn/CSS/First_steps">Introducció a CSS</a>.)</td>
  </tr>
  <tr>
   <th scope="row">Objectiu:</th>
   <td>Aprendre a crear elements flotants a les pàgines web, i a fer servir la propietat <em>clear</em> i altres mètodes per a netejar els elements flotants.</td>
  </tr>
 </tbody>
</table>

<h2 id="La_història_dels_elements_flotants">La història dels elements flotants</h2>

<p>La propietat {{cssxref("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.</p>

<p>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 <a href="https://css-tricks.com/snippets/css/drop-caps/">caplletres</a>.</p>

<p>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 {{cssxref("float")}} d'aquesta manera s'hauria de contemplar com una <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">tècnica antiquada</a>.</p>

<p>En aquest article ens centrarem en l'ús apropiat de la propietat {{cssxref("float")}}.</p>

<h2 id="Un_exemple_de_float_simple">Un exemple de float simple</h2>

<p>Explorem com utilitzar els <em>float</em>. 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 <code>index.html</code> al teu ordinador, omplint-lo amb <a href="https://github.com/mdn/learning-area/blob/master/html/introduction-to-html/getting-started/index.html">una plantilla HTML simple</a>, 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.</p>

<p>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:</p>

<pre class="brush: html notranslate">&lt;h1&gt;Exemple simple de caixa flotant&lt;/h1&gt;

&lt;div class="box"&gt;Caixa flotant&lt;/div&gt;

&lt;p&gt;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. &lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;</pre>

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

<pre class="brush: css notranslate">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;
}</pre>

<p>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 {{cssxref("float")}} i {{cssxref("margin-right")}} a la regla <code>.box</code>:</p>

<pre class="brush: css notranslate">.box {
  float: left;
  margin-right: 15px;
  width: 150px;
  height: 100px;
  border-radius: 5px;
  background-color: rgb(207,232,220);
  padding: 1em;
}</pre>

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

<div id="Float_1">
<div class="hidden">
<h6 id="Float_Example_1">Float Example 1</h6>

<pre class="brush: html notranslate">&lt;h1&gt;Exemple simple de caixa flotant&lt;/h1&gt;

&lt;div class="box"&gt;Caixa flotant&lt;/div&gt;

&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;
</pre>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif
}

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

<p>{{ EmbedLiveSample('Float_1', '100%', 500) }}</p>

<p>Analitzem ara com funciona el <em>float</em> — l'element amb el <em>float</em> aplicat (l'element {{htmlelement("div")}} en aquest cas) és extret del flux normal del document i està enganxat al costat esquerre del seu element contenidor pare ({{htmlelement("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à.</p>

<p>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 <em>float</em> a <code>right</code> i substitueix {{cssxref("margin-right")}} per {{cssxref("margin-left")}} al darrer conjunt de regles per veure el resultat.</p>

<p>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.</p>

<p>Afegeix una clase <code>special</code> 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.</p>

<pre class="brush: css notranslate">.special {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
}
</pre>

<p>Per tal que l'efecte sigui més fàcil de veure, canvia el <code>margin-right</code> del teu element flotant a <code>margin</code>, 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.</p>

<div id="Float_2">
<div class="hidden">
<h6 id="Float_Example_2">Float Example 2</h6>

<pre class="brush: html notranslate">&lt;h1&gt;Exemple simple de caixa flotant&lt;/h1&gt;

&lt;div class="box"&gt;Caixa flotant&lt;/div&gt;

&lt;p class="special"&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;    </pre>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif
}

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

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

<p>{{ EmbedLiveSample('Float_2', '100%', 500) }}</p>

<p>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.</p>

<h2 id="Netejant_floats">Netejant floats</h2>

<p>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 <em>float</em>. Això s'aconsegueix amb la propietat {{cssxref ("clear")}}.</p>

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

<pre class="brush: css notranslate">.cleared {
  clear: left;
}
</pre>

<div id="Float_3">
<div class="hidden">
<h6 id="Float_Example_3">Float Example 3</h6>

<pre class="brush: html notranslate">&lt;h1&gt;Exemple simple de caixa flotant&lt;/h1&gt;

&lt;div class="box"&gt;Caixa flotant&lt;/div&gt;

&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;

&lt;p class="cleared"&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;
    </pre>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif
}

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

.cleared {
  clear: left;
}
</pre>
</div>
</div>

<p>{{ EmbedLiveSample('Float_3', '100%', 600) }}</p>

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

<ul>
 <li><code>left</code>: neteja els elements flotats a l'esquerra.</li>
 <li><code>right</code>: neteja els elements flotats a la dreta.</li>
 <li><code>both</code>: neteja qualsevol element flotat, a l'esquerra o a la dreta.</li>
</ul>

<h2 id="Netejar_la_caixa_contenidora_dun_float">Netejar la caixa contenidora d'un float</h2>

<p>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 {{htmlelement("div")}} amb una classe <code>wrapper</code>.</p>

<pre class="brush: html notranslate">&lt;div class="wrapper"&gt;
  &lt;div class="box"&gt;Caixa flotant&lt;/div&gt;

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

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

<pre class="brush: css notranslate">.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
}</pre>

<p>A més, elimina la classe <code>.cleared</code> anterior:</p>

<pre class="comment-text  notranslate" id="ct-0">.cleared {
    clear: left;
}</pre>

<p>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.</p>

<div id="Float_4">
<div class="hidden">
<h6 id="Float_Example_4">Float Example 4</h6>

<pre class="brush: html notranslate">&lt;h1&gt;Exemple simple de caixa flotant&lt;/h1&gt;
&lt;div class="wrapper"&gt;
  &lt;div class="box"&gt;Caixa flotant&lt;/div&gt;

  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
&lt;/div&gt;

&lt;p class="cleared"&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;    </pre>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif
}

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

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

<p>{{ EmbedLiveSample('Float_4', '100%', 600) }}</p>

<p>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.</p>

<h3 id="El_hack_clearfix">El hack clearfix</h3>

<p>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.</p>

<p>Afefeix el següent CSS a l'exemple:</p>

<pre class="brush: css notranslate">.wrapper::after {
  content: "";
  clear: both;
  display: block;
}</pre>

<p>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 <code>&lt;div&gt;</code> a sota dels elements i li haguessis afegit la propietat <code>clear: both</code>.</p>

<div id="Float_5">
<div class="hidden">
<h6 id="Float_Example_5">Float Example 5</h6>

<pre class="brush: html notranslate">&lt;h1&gt;Exemple simple de caixa flotant&lt;/h1&gt;
&lt;div class="wrapper"&gt;
  &lt;div class="box"&gt;Caixa flotant&lt;/div&gt;

  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
&lt;/div&gt;
&lt;p class="cleared"&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;      </pre>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif
}

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

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

.wrapper::after {
  content: "";
  clear: both;
  display: block;
}
</pre>
</div>
</div>

<p>{{ EmbedLiveSample('Float_5', '100%', 600) }}</p>

<h3 id="Fent_servir_overflow">Fent servir overflow</h3>

<p>Un mètode alternatiu és establir la propietat {{cssxref("overflow")}} de l'element contenidor amb un valor diferent de <code>visible</code>.</p>

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

<pre class="brush: css notranslate">.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
  overflow: auto;
}</pre>

<div id="Float_6">
<div class="hidden">
<h6 id="Float_Example_6">Float Example 6</h6>

<pre class="brush: html notranslate">&lt;h1&gt;Exemple simple de caixa flotant&lt;/h1&gt;
&lt;div class="wrapper"&gt;
  &lt;div class="box"&gt;Caixa flotant&lt;/div&gt;

  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
&lt;/div&gt;
&lt;p class="cleared"&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;    </pre>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif
}

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

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

<p>{{ EmbedLiveSample('Float_6', '100%', 600) }}</p>

<p>Aquest exemple funciona creant el que s'anomena un <em><strong>block formatting context</strong></em> (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..</p>

<h3 id="display_flow-root">display: flow-root</h3>

<p>La manera moderna de resoldre aquest problema és fer servir el valor <code>flow-root</code> de la propietat <code>display</code>. 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 <code>overflow: auto</code> de la regla <code>.wrapper</code> i afegeix <code>display: flow-root</code>. Assumint que el teu <a href="/en-US/docs/Web/CSS/display#Browser_compatibility">navegador sigui compatible</a>, la caixa es netejarà.</p>

<pre class="brush: css notranslate">.wrapper {
  background-color: rgb(79,185,227);
  padding: 10px;
  color: #fff;
  display: flow-root;
}</pre>

<div id="Float_7">
<div class="hidden">
<h6 id="Float_Example_7">Float Example 7</h6>

<pre class="brush: html notranslate">&lt;h1&gt;Exemple simple de caixa flotant&lt;/h1&gt;
&lt;div class="wrapper"&gt;
  &lt;div class="box"&gt;Caixa flotant&lt;/div&gt;

  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. &lt;/p&gt;
&lt;/div&gt;
&lt;p class="cleared"&gt;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.&lt;/p&gt;

&lt;p&gt;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.&lt;/p&gt;    </pre>

<pre class="brush: css notranslate">body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
  font: .9em/1.2 Arial, Helvetica, sans-serif
}

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

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

<p>{{ EmbedLiveSample('Float_7', '100%', 600) }}</p>

<h2 id="Resum">Resum</h2>

<p>Ara ja saps tot el que has de saber sobre els flotadors en el desenvolupament web modern. Consulta l'article sobre els <a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">mètodes de disseny antiquats</a> per obtenir informació de com es feien servir, cosa que pot ser-te útil si has de treballar en projectes antics.</p>

<p>{{PreviousMenuNext("Learn/CSS/CSS_layout/Grids", "Learn/CSS/CSS_layout/Positioning", "Learn/CSS/CSS_layout")}}</p>

<h2 id="En_aquest_mòdul">En aquest mòdul</h2>

<ul>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Introduction">Introduction to CSS layout</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow">Normal Flow</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Flexbox">Flexbox</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Grids">Grid</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Floats">Floats</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Positioning">Positioning</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Multiple-column_Layout">Multiple-column Layout</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Legacy_Layout_Methods">Legacy Layout Methods</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Supporting_Older_Browsers">Supporting older browsers</a></li>
 <li><a href="/en-US/docs/Learn/CSS/CSS_layout/Fundamental_Layout_Comprehension">Fundamental Layout Comprehension Assessment</a></li>
</ul>