Propiedad float

La propiedad float - define bloques flotantes que serán rodeados por texto. La propiedad float a veces se utiliza en conjunto con la propiedad clear, que cancela el flujo alrededor del elemento.

Aunque inicialmente float fue concebido para insertar bloques con flujo de texto, actualmente se utiliza de manera muy amplia y no estándar para la construcción de diseños.

Sintaxis

selector {
	float: left | right | none;
}

selector {
	clear: both | left | right | none;
}

Valores para float

Valor	Descripción
`left`	El bloque flotará a la izquierda, y el texto fluirá alrededor de él a la derecha.
`right`	El bloque flotará a la derecha, y el texto fluirá alrededor de él a la izquierda.
`none`	No hay flujo alrededor.

Valor por defecto: none.

Valores para clear

Valor	Descripción
`left`	Cancela el flujo por la izquierda.
`right`	Cancela el flujo por la derecha.
`both`	Cancela el flujo tanto por la izquierda como por la derecha.
`none`	No hay cancelación de flujo.

Valor por defecto: none.

Ejemplo

Usamos float de manera no estándar, colocando los elementos de la lista en línea:

<ul>
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
</ul>

li {
	float: left;
	border: 1px solid red;
}

Véase también

la propiedad clear,
que cancela el float para elementos superiores