---
title: float
slug: Web/CSS/float
tags:
  - CSS
translation_of: Web/CSS/float
---
<div>{{CSSRef}}</div>

<h2 id="Resumo">Resumo</h2>

<p>A propriedade <strong>float</strong> do CSS determina que um elemento deve ser retirado do seu fluxo normal e colocado ao longo do lado direito ou esquerdo do seu containêr, onde textos  e elementos em linha irão se posicionar ao seu redor.</p>

<p>Um elemento flutuante é um tipo de elemento cujo valor de <code>float </code>é diferente de <code>none.</code></p>

<p>{{cssinfo}}</p>

<p>Como <code>float</code> implica o uso the <em>block layout, </em>ele modifica o valor computado de {{cssxref("display")}} em alguns casos:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Valor Especificado</th>
   <th scope="col">Valor Computado</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><code>inline</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>inline-block</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>inline-table</code></td>
   <td><code>table</code></td>
  </tr>
  <tr>
   <td><code>table-row</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-row-group</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-column</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-column-group</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-cell</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-caption</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-header-group</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>table-footer-group</code></td>
   <td><code>block</code></td>
  </tr>
  <tr>
   <td><code>flex</code></td>
   <td><code>flex</code>, porém <code>float</code> não produz efeito em tais elementos</td>
  </tr>
  <tr>
   <td><code>inline-flex</code></td>
   <td><code>inline-flex</code>, porém <code>float</code> não produz efeito em tais elementos</td>
  </tr>
  <tr>
   <td><em>other</em></td>
   <td><em>unchanged</em></td>
  </tr>
 </tbody>
</table>

<div class="note"><strong>Nota</strong>: Se você está se referindo a essa propriedade do Javascript como um membro do objeto {{domxref("element.style")}}, você deve referir-se a <code>cssFloat. </code>Observe também que as versões 8 e posteriores referem-se a <code>styleFloat. </code>Esta é uma exceção à regra de que o nome do membro DOM é o nome em estilo <em>camel-case </em>do nome CSS separado por traço (e se deve ao fato de que "float" é uma palavra reservada em Javascript, tal qual a necessidade de especificar "class" como "className" e "for" como "htmlFor").</div>

<h2 id="Sintaxe">Sintaxe</h2>

<pre class="brush:css">float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/* Global values */
float: inherit;
float: initial;
float: unset;
</pre>

<h3 id="Valores">Valores</h3>

<dl>
 <dt><code>left</code></dt>
 <dd>É uma palavra-chave que indica que o elemento deve flutuar à esquerda do bloco.</dd>
 <dt><code>right</code></dt>
 <dd>É uma palavra-chave que indica que o elemento deve flutuar à direita do bloco.</dd>
 <dt><code>none</code></dt>
 <dd>É uma palavra-chave que indica que o elemtno não deve flutuar.</dd>
 <dt><code>inline-start</code> {{experimental_inline}}</dt>
 <dd>É uma palavra-chave que indica que o elemento deve flutuar no lado inicial do seu bloco, ou seja, o lado esquerdo em scripts <code>ltr</code> e no direito em scripts <code>rtl</code>.</dd>
 <dt><code>inline-end</code> {{experimental_inline}}</dt>
 <dd>É uma palavra-chave que indica que o elemento deve flutuar no lado final do seu bloco, ou seja, o lado direito em scripts <code>ltr</code> e no esquerdo em scripts <code>rtl</code>.</dd>
</dl>

<h3 id="Sintaxe_Formal">Sintaxe Formal</h3>

{{csssyntax}}

<h2 id="Exemplos">Exemplos</h2>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;style type="text/css"&gt;
  div { border: solid red;  max-width: 70ex; }
  h4  { float: left;  margin: 0; }
&lt;/style&gt;

&lt;div&gt;
  &lt;h4&gt;HELLO!&lt;/h4&gt;
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text.
&lt;/div&gt;</pre>

<p>{{ EmbedLiveSample('Exemplos', '', '', '', 'Web/CSS/float') }}</p>

<div style="border: solid red; max-width: 70ex;">
<h4 id="HELLO!" style="float: left; margin: 0;">HELLO!</h4>
This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.</div>

<h3 id="sect1"> </h3>

<h3 id="Como_floats_são_posicionados">Como <code>floats</code> são posicionados</h3>

<p>Como mencionado acima, quando um elemento é flutuado ele é retirado do seu fluxo normal no documento. Ele é reposicionado à esquerda ou à direita até tocar a borda do seu próprio <em>box </em>ou outro elemento flutuante.</p>

<p>Na imagem abaixo, existem 3 quadrados vermelho. Dois flutuando à esquerda e um flutuando à direita. Observe que o segundo quadrado vermelho à esquerda é posicionado à direita do primeiro. Quadrados adicionais poderiam continuar sendo empilhados à direita até que eles completassem o box, após isso eles iriam para próxima linha. </p>

<p><img src="/@api/deki/files/4927/=floats.png" style="height: 248px; width: 729px;"></p>

<h3 id="Limpando_floats">Limpando <em>floats</em></h3>

<p>No exemplo abaixo, os elementos flutuantes são menores verticalmente que o bloco de texto com os quais estão flutuando. Apesar disso, se o texto não fosse comprido o bastante para passar abaixo do limite inferior de todos os <em>floats, </em>nos veríamos efeitos não previstos. Se o parágrafo abaixo, por enquanto, somente lê "Lorem ipsum dolor sit amet,",  e fosse seguido por outro cabeçalho do mesmo estilo de cabeçaljo "Floats Example", o segundo cabeçalho iria aparecer entre os dois <em>boxes</em> vermelhos. Muito provavelmente, queremos que o próximo título seja alinhado à esquerda. Para conseguir isso, precisamos limpar os <em>floats</em>.</p>

<p>O jeito mais simples de limpar os floats neste exemplo é adicionar a propriedade {{Cssxref("clear")}} para o próximo cabeçalho que queremos assegurar que esteja alinhado à esquerda. </p>

<pre class="brush:css">h2.secondHeading { clear: both; }
</pre>

<p>Porém, este método apenas funciona se não existirem outros elementos com o mesmo <a href="/en-US/docs/Web/CSS/block_formatting_context" rel="internal">block formatting context</a>  aos quais nós queiramos que o cabeçalho continue aparecendo ao lado horizontalmente. Se o nosso<code> H2</code> possui irmãos os quais são barras laterais flutuadas à esquerda e à direita, usar <code>clear </code>irá forçá-lo a aparecer abaixo das duas barras laterais, o que provavelmente não é o que queríamos.</p>

<p>Se limpar <code>floats </code>em um elemento não é uma opção, uma outra abordagem é limitar o contexto de formatação do bloco do containêr flutuante. Referindo-se ao exemplo acima novamente, aparentemente todos os três quadrados vermelhos possuem um elemento paragrafo <code>P</code> . Nós podemos atribuir a propiedade {{Cssxref("overflow")}} neste paragrafo para <code>hidden</code> ou <code>auto</code>  para obrigá-lo a expandir para contê-los, porém não permitirá que os mesmos parágrafos pulem fora do limite inferior.</p>

<pre class="brush:css">p.withRedBoxes { overflow: hidden; height: auto; }
</pre>

<div class="note"><strong>Nota:</strong> Atribuir <code>overflow </code>para<code> scroll </code>irá conter também qualquer elemento filho flutuante, mas mostrará as barras de rolagem não importando o comprimento vertical do elemento. Aqui nós estamos atribuindo <code>height </code>como <code>auto </code>mesmo sendo este o padrão para indicar que o containêr deve crescer para acomodar seu conteúdo. </div>

<h2 id="Especificações">Especificações</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificação</th>
   <th scope="col">Situação</th>
   <th scope="col">Comentário</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}</td>
   <td>{{Spec2('CSS Logical Properties')}}</td>
   <td>Adiciona os valores <code>inline-start</code> e <code>inline-end</code>.</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Box', '#float', 'float')}}</td>
   <td>{{Spec2('CSS3 Box')}}</td>
   <td>
    <p>Muitos valores novos, nem todos claramente definidos ainda. Qualquer diferença em comportamento não relacionado a novas funções são involutárias; por favor informe.</p>
   </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'visuren.html#float-position', 'float')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td>Sem mudanças</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#float', 'float')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Definição inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>4.0</td>
   <td>7.0</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td><code>inline-start</code>, <code>inline-end</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoDesktop("45")}} [1]</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Edge</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>Firefox OS</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>1.0</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatGeckoMobile("1")}}</td>
   <td>1.0</td>
   <td>6.0</td>
   <td>6.0</td>
   <td>1.0</td>
  </tr>
  <tr>
   <td><code>inline-start</code>, <code>inline-end</code></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatGeckoMobile("45")}} [1]</td>
   <td>2.5</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Habilitado por padrão no Nightly e Aurora (Dev edition); para ativar em uma versão <em>release</em> ou <em>beta</em>, você precisa alterar o <code>layout.css.float-logical-values.enabled</code> para <code>true</code>.</p>

<h2 id="Veja_também">Veja também</h2>

<ul>
 <li><a href="/en-US/docs/Web/CSS/block_formatting_context">Block formatting context</a></li>
</ul>