float

Prubalo

float: none;

float: left;

float: right;

float: inline-start;

float: inline-end;

<section class="default-example" id="default-example">
  <div class="example-container">
    <div class="transition-all" id="example-element">Float me</div>
    As much mud in the streets as if the waters had but newly retired from the
    face of the earth, and it would not be wonderful to meet a Megalosaurus,
    forty feet long or so, waddling like an elephantine lizard up Holborn Hill.
  </div>
</section>

.example-container {
  border: 1px solid #c5c5c5;
  padding: 0.75em;
  text-align: left;
  width: 80%;
  line-height: normal;
}

#example-element {
  border: solid 10px #efac09;
  background-color: #040d46;
  color: white;
  padding: 1em;
  width: 40%;
}

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

Como float implica el uso del layout de bloques, este modifica el valor calculado de los valores display , en algunos casos:

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 ms antiguos hay que escribir la propiedad como cssFloat, otros navegadores como Internet Explorer 8 y anteriores utilizan styleFloat. Fue una excepcin a la regla, que el nombre del miembro DOM sea el nombre camel-case (styleFloat) del nombre CSS (style-float) separado por guin (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" ).

Sintxis

/* 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 debe flotar a la izquierda de su bloque contenedor.

right

El elemento debe flotar a la derecha de su bloque contenedor.

none

El elemento no deber flotar.

inline-start

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

inline-end

El elemento debe flotar en el costado de trmino de su bloque contenedor . Esto es el lado derecho con scripts ltr y el lado izquierdo con scripts rtl.

Definicin Formal

Sintxis Formal

float = 
  block-start      |
  block-end        |
  inline-start     |
  inline-end       |
  snap-block       |
  <snap-block()>   |
  snap-inline      |
  <snap-inline()>  |
  left             |
  right            |
  top              |
  bottom           |
  none             |
  footnote         

<snap-block()> = 
  snap-block( <length> , [ start | end | near ]? )  

<snap-inline()> = 
  snap-inline( <length> , [ left | right | near ]? )  

Ejemplos

Como son ubicados los elements flotantes

Ver El Ejemplo Vivo

Como se ha mencionado ms 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 lmite 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 cmo el segundo cuadrado de la izquierda se coloca a la derecha del primero. Si agregamos cuadrados adicionales se continuaran apilando hacia la derecha, hasta que hayan llenado la caja contenedora, y luego rellenaran la siguiente lnea.

Un elemento flotante es al menos tan alto como su elemento hijo flotante ms 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 de modo de no tener que limpiar su pariente adyacente.

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:

Limpiando (clearing) flotantes

A veces querrs forzar un item a moverse por debajo de elementos flotantes. Por ejemplo, prrafos que han de permanecer adyacentes a elementos flotantes, pero forzar a los encabezados a estar en su propia lnea. Para ello revisa el siguiente ejemplo: clear

Especificaciones

Compatibilidad con navegadores

Ver tambin

clear, display, position