float

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

Resumen

La propiedad float especifica si un elemento debe salir del flujo normal y aparecer a la izquierda o a la derecha de su contenedor, donde los elementos de texto y los en línea aparecerán a su alrededor.

Un elemento flotante es un elemento en el que el valor calculado de float no es igual a none.

Valor especificado Valor Computado
inline block
inline-block block
inline-table table
table-row block
table-row-group block
table-column block
table-column-group block
table-cell block
table-caption block
table-header-group block
table-footer-group block
inline-flex flex
inline-grid grid
otros sin cambios

Nota: Al referirse a una propiedad desde JavaScript como un miembro del objeto element.style, hay que tener en cuenta que los navegadores modernos soportan float pero en navegadores más antiguos hay que escribir la propiedad como cssFloat, otros navegadores como Internet Explorer 8 y anteriores utilizan styleFloat. Esta fue una excepción a la norma, que el nombre del miembro del DOM corresponde al mismo nombre que en CSS, pero en camel-case (ya que "float" es una palabra reservada en JavaScrit, como se ha visto en la necesidad de escapar una "class" como "className" y la necesidad de etiquetas de escape tipo "for" como por ejemplo "htmlFor"). (ver la lista en DOM:CSS). 

Sintaxis

/* 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;

Valores

left 

El elemento flota a la izquierda de su bloque contenedor.

right 

El elemento flota a la derecha de su bloque contenedor.

none 

El elemento deberá 'no' flotar.

inline-start

El elemento debe flotar en el costado de comienzo de su bloque contenedor. Será el lado derecho en scripts ltr y el lado izquierdo en scripts tipo rtl.

Ejemplos

Ver El Ejemplo Vivo

Cómo se posicionan los elementos flotantes - floated elements

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 otro elemento flotante.

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.

Un elemento flotante es al menos tan alto como el elemento hijo flotante más alto. En el ejemplo se le da al elemento padre width: 100% 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.

HTML

<section>
  <div class="left">1</div>
  <div class="left">2</div>
  <div class="right">3</div>
  <p>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.</p>
</section>

CSS

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;
}

RESULTADO:

"Clear" un elemento flotante:

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 encabezados a estar en su propia línea. Para ello revisa el siguiente ejemplo: clear

Especificaciones

Compatibilidad de navegadores

Navegador Versión mínima
Internet Explorer 4
Netscape 4
Opera 3.5

Ver también

clear, display, position

Categorías

Interwiki Language