Propiedades float en CSS

La propiedad float CSS especifica que el elemento debe colocarse a la izquierda o derecha del contenedor al que pertenece, lo que permite que el texto y los elementos en línea envuelvan el elemento. Este elemento se eliminará del flujo normal de la página, pero seguirá siendo parte de it (a diferencia de los elementos posicionados Absoluto [absoluto]).

Funciones css float

Valor inicial	`none`
Aplicado a	Todos los elementos, pero esta propiedad no tendrá ningún efecto si el valor de la propiedad `display` es `none`.
Heredable	No
Móvil	No
Valor calculado	Como se especificó.

Dado que la propiedad se float refiere a un diseño de bloque, cambiará el valor calculado de la propiedad display en algunos casos:

valor específico	Valor calculado
`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`
`flex`	`flex`, pero la propiedad no tendrá ningún `float` efecto sobre esos elementos.
`inline-flex`	`inline-flex`, pero la propiedad no tendrá ningún `float` efecto sobre esos elementos.
Aparte de eso	Sin cambios en el valor calculado.

El elemento float se puede definir como el elemento para el que el valor de la propiedad float no es igual a none.

/ * palabras clave * / 
float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;

/ * valores globales * / 
float: inherit;
float: initial;
float: unset;

Ejemplos

Como se mencionó anteriormente, cuando un objeto float, se eliminará de la estructura normal del documento (pero sigue siendo parte de ella) y se puede mover hacia la izquierda o hacia la derecha hasta que toque el borde de su contenedor u otro objeto flotante.

En el siguiente ejemplo, hay tres cuadrados, dos de ellos float a la izquierda y uno a la derecha. Tenga en cuenta que el segundo cuadrado flotante a la izquierda estará a la derecha del primer cuadrado. Tenga en cuenta que los cuadrados adicionales aparecerán apilar a la derecha hasta que llene el cuadro que los contiene y luego pasarán a la siguiente línea.

Código HTML:

<section>
  <div class = "left"> 1 </div>
  <div class = "left"> 2 </div>
  <div class = "right"> 3 </div> 
  < p > texto 1 2 3 4 5 
  </ p > 
</ section >

Código CSS:

section {
  border: 1px solid blue;
}
div {
  margin: 5px;
  width: 50px;
  height: 50px;
  color: white;
  text-align: center;
}
.left {
  float: left;
  background-color: salmon;
}
.right {
  float: right;
  background: #006699;
}

Vacíe el lugar de los elementos float.

A veces desea que un elemento vaya debajo de elementos float, por ejemplo, es posible que desee que los párrafos de texto permanezcan junto a los elementos flotantes, pero desea que los encabezados estén en su propia línea, luego puede usar la propiedad clear(consulte su página para ver ejemplos) .

Soporte de navegadores

Chrome	Firefox	EI	Ópera	Safari
1.0	1.0	4.0	7.0	1.0

Estructura general

La propiedad acepta float solo una de las palabras mencionadas en esta sección.

left

El artículo estará float en el lado izquierdo de su contenedor.

right

El artículo estará float en el lado derecho de su contenedor.

none

Es posible que el artículo no esté float.

Estructura

float: none | left | right;

La página de propiedades position que describe cómo se coloca el objeto en el documento.
La página de propiedades display que especifica qué tipo de cuadro de visualización se utilizará con el elemento.