path: root/files/es/web/css/float/index.html

---
title: float
slug: Web/CSS/float
tags:
  - CSS
  - CSS Float
  - CSS Posicionamiento
  - CSS Propiedad
  - 'CSS:Referencias'
  - Todas_las_Categorías
translation_of: Web/CSS/float
---
<p>{{CSSRef}}</p>

<p>La propiedad CSS <code>float</code> ubica un elemento al lado izquierdo o derecho de su contenedor, permitiendo a los elementos de texto y en línea aparecer a su costado. El elemento es removido del normal flujo de la página, aunque aún sigue siendo parte del flujo (a diferencia del  <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/position#Absolute_positioning">posicionamiento absoluto</a>).</p>

<p>{{EmbedInteractiveExample("pages/css/float.html")}}</p>

<div class="hidden">
<p>La fuente de este ejemplo interactivo está almacenada en un repositorio de GitHub. Si deseas contribuír a los ejemplos interactivos del proyecto, por favor clonar <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> y enviarnos una solicitud de extracción -pull request-.</p>
</div>

<p>Un elemento <strong>flotante</strong> es un elemento en el que el {{ Cssxref("computed value", "valor calculado") }} de <code>float</code> <em>no</em> es igual a <code>none</code>.</p>

<p>Como <code>float</code> implica el uso del layout de bloques, este modifica el valor calculado de los valores {{cssxref("display")}} , en algunos casos:</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col"><strong>Valor especificado</strong></th>
   <th scope="col"><strong>Valor Computado</strong></th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>inline</td>
   <td>block</td>
  </tr>
  <tr>
   <td>inline-block</td>
   <td>block</td>
  </tr>
  <tr>
   <td>inline-table</td>
   <td>table</td>
  </tr>
  <tr>
   <td>table-row</td>
   <td>block</td>
  </tr>
  <tr>
   <td>table-row-group</td>
   <td>block</td>
  </tr>
  <tr>
   <td>table-column</td>
   <td>block</td>
  </tr>
  <tr>
   <td>table-column-group</td>
   <td>block</td>
  </tr>
  <tr>
   <td>table-cell</td>
   <td>block</td>
  </tr>
  <tr>
   <td>table-caption</td>
   <td>block</td>
  </tr>
  <tr>
   <td>table-header-group</td>
   <td>block</td>
  </tr>
  <tr>
   <td>table-footer-group</td>
   <td>block</td>
  </tr>
  <tr>
   <td>inline-flex</td>
   <td>flex</td>
  </tr>
  <tr>
   <td>inline-grid</td>
   <td>grid</td>
  </tr>
  <tr>
   <td>otros</td>
   <td>sin cambios</td>
  </tr>
 </tbody>
</table>

<p>Nota: Al referirse a una propiedad desde JavaScript como un miembro del objeto <a href="/es/DOM/element#element.style" title="es/DOM/element#element.style">element.style</a>, hay que tener en cuenta que los navegadores modernos soportan <code>float</code> pero en navegadores más antiguos hay que escribir la propiedad como <code>cssFloat</code>, otros navegadores como Internet Explorer 8 y anteriores utilizan <code>styleFloat</code>. Fue una excepción a la regla, que el nombre del miembro DOM sea el nombre <em>camel-case</em> (styleFloat) del nombre CSS (style-float) separado por guión (debido al hecho que "float" es una palabra reservada en JavaScript, es necesario escapar "class" como "className" y escapar "for" de la etiqueta como "htmlFor" ).</p>

<h2 id="Sintáxis">Sintáxis</h2>

<pre class="notranslate">/* Valores clave || Keyword values */
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

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

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

<p><code><strong>left</strong> </code></p>

<p>El elemento debe flotar a la izquierda de su bloque contenedor.</p>

<p><code><strong>right</strong> </code></p>

<p>El elemento debe flotar a la derecha de su bloque contenedor.</p>

<p><code><strong>none</strong> </code></p>

<p>El elemento no deberá flotar.</p>

<p><strong><code>inline-start</code></strong></p>

<p>El elemento debe flotar en el costado de inicio de su bloque contenedor. Esto es el lado izquierdo con scripts <code>ltr</code> y el lado derecho con scripts <code>rtl</code>.</p>

<dl>
 <dt><code>inline-end</code></dt>
 <dd>El elemento debe flotar en el costado de término de su bloque contenedor . Esto es el lado derecho con scripts <code>ltr</code> y el lado izquierdo con scripts <code>rtl</code>.</dd>
</dl>

<h2 id="Definición_Formal">Definición Formal</h2>

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

<h2 id="Sintáxis_Formal">Sintáxis Formal</h2>

<dl>
 <dt>
 {{csssyntax}}
 </dt>
</dl>

<h2 id="Ejemplos" name="Ejemplos">Ejemplos</h2>

<h3 id="Como_son_ubicados_los_elements_flotantes">Como son ubicados los elements flotantes </h3>

<p><a href="/samples/cssref/float.html">Ver El Ejemplo Vivo</a></p>

<p>Como se ha mencionado más arriba, cuando un elemento flota, es removido del flujo normal del documento (aunque sigue perteneciendo a él). Se cambia hacia la izquierda, o hacia la derecha, hasta que toca el límite de su caja contenedora, u <em>otro elemento flotante.</em></p>

<p>En este ejemplo, hay tres cuadrados de color. Dos flotan hacia la izquierda, y uno hacia la derecha. Nota cómo el segundo cuadrado de la izquierda se coloca a la derecha del primero. Si agregamos cuadrados adicionales se continuarían apilando hacia la derecha, hasta que hayan llenado la caja contenedora, y luego rellenarían la siguiente línea.</p>

<p>Un elemento flotante es al menos tan alto como su elemento hijo flotante más alto. En el ejemplo se le da al elemento padre <code>width: 100% </code>y la propiedad de flotante para asegurar que es lo suficientemente alto para encajar con sus hijos flotantes, y asegurar que ocupa el ancho -width- del padre de modo de no tener que limpiar su pariente adyacente.</p>

<p><strong>HTML</strong></p>

<pre class="notranslate">&lt;section&gt;
  &lt;div class="left"&gt;1&lt;/div&gt;
  &lt;div class="left"&gt;2&lt;/div&gt;
  &lt;div class="right"&gt;3&lt;/div&gt;
  &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipiscing elit.
     Morbi tristique sapien ac erat tincidunt, sit amet dignissim
     lectus vulputate. Donec id iaculis velit. Aliquam vel
     malesuada erat. Praesent non magna ac massa aliquet tincidunt
     vel in massa. Phasellus feugiat est vel leo finibus congue.&lt;/p&gt;
&lt;/section&gt;</pre>

<p><strong>CSS</strong></p>

<pre class="notranslate">section {
  border: 1px solid blue;
  width: 100%;
  float: left;
}

div {
  margin: 5px;
  width: 50px;
  height: 150px;
}

.left {
  float: left;
  background: pink;
}

.right {
  float: right;
  background: cyan;
}</pre>

<p><strong>RESULTADO:</strong></p>

<p>{{EmbedLiveSample('How_floated_elements_are_positioned','400','180')}}</p>

<h3 id="Notas" name="Notas">Limpiando (clearing) flotantes:</h3>

<p>A veces querrás forzar un item a moverse por debajo de elementos flotantes. Por ejemplo, párrafos que han de permanecer adyacentes a elementos flotantes, pero forzar a los encabezados a estar en su propia línea. Para ello revisa el siguiente ejemplo: {{cssxref("clear")}}</p>

<h3 id="Especificaciones" name="Especificaciones">Especificaciones</h3>

<ul>
 <li><a class="external" href="http://www.w3.org/TR/CSS1#float">CSS 1</a></li>
 <li><a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float">CSS 2.1</a></li>
</ul>

<h3 id="Compatibilidad_de_navegadores" name="Compatibilidad_de_navegadores">Compatibilidad de navegadores</h3>

<table class="standard-table">
 <tbody>
  <tr>
   <th>Navegador</th>
   <th>Versión mínima</th>
  </tr>
  <tr>
   <td>Internet Explorer</td>
   <td>4</td>
  </tr>
  <tr>
   <td>Netscape</td>
   <td>4</td>
  </tr>
  <tr>
   <td>Opera</td>
   <td>3.5</td>
  </tr>
 </tbody>
</table>

<h3 id="Ver_tambi.C3.A9n" name="Ver_tambi.C3.A9n">Ver también</h3>

<p>{{ Cssxref("clear") }}, {{ Cssxref("display") }}, {{ Cssxref("position") }}</p>

<div class="noinclude">
<p><span class="comment">Categorías</span></p>

<p><span class="comment">Interwiki Language</span></p>
</div>