Atributo float de CSS

Definición y uso

La propiedad float define en qué dirección debe flotar el elemento. Anteriormente, esta propiedad se aplicaba siempre a las imágenes, para que el texto se surrounds alrededor de la imagen, pero en CSS, cualquier elemento puede flotar. Los elementos flotantes generan un cuadro de nivel de bloque, sin importar qué tipo de elemento sea.

Si el elemento flotante no es un elemento sustituto, se debe especificar un ancho claro; de lo contrario, se volverán lo más estrechos posible.

Notas:Si hay muy poco espacio en una línea para el elemento flotante, este se desplazará a la siguiente línea, y este proceso continuará hasta que una línea tenga suficiente espacio.

Véase también:

Tutoriales de CSS:Posicionamiento CSS

Manual de referencia de HTML DOM:Atributo cssFloat

Ejemplo

Haga que la imagen flote a la derecha:

img
  {
  float:right;
  }

Pruebe usted mismo

Sintaxis de CSS

float: none|left|right|initial|inherit;

Valor del atributo

Valor Descripción
left El elemento flota a la izquierda.
right El elemento flota a la derecha.
none Valor predeterminado. El elemento no flota y se muestra en la posición donde aparece en el texto.
inherit Se debe especificar el valor de la propiedad float del elemento del padre.

Detalles técnicos

Valor predeterminado: none
Herencia: no
Versión: CSS1
Sintaxis de JavaScript: object.style.cssFloat="left"

Ejemplo TIY

Aplicación simple de la propiedad float
Haga que la imagen flote a la derecha de un párrafo.
Haga que la imagen con borde y margen flote a la derecha del párrafo
Haga que la imagen flote a la derecha del párrafo. Agregue un borde y un margen a la imagen.
La imagen con título flota a la derecha
Haga que la imagen con título flote a la derecha
Haga que la inicial del párrafo flote a la izquierda
Haga que la inicial del párrafo flote a la izquierda y agregue estilos a esta letra.
Crear un menú horizontal
Cree un menú horizontal utilizando flotación con enlaces de una columna.
Crear una página inicial sin tabla
Utilice flotación para crear una página inicial con encabezado, pie de página, índice de contenido a la izquierda y contenido principal.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite completamente la propiedad.

Chrome IE / Edge Firefox Safari Opera
1.0 4.0 1.0 1.0 7.0