Propiedades float en CSS

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 inicialnone
Aplicado aTodos los elementos, pero esta propiedad no tendrá ningún efecto si el valor de la propiedad display es none.
HeredableNo
MóvilNo
Valor calculadoComo 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íficoValor calculado
inlineblock
inline-blockblock
inline-tabletable
table-rowblock
table-row-groupblock
table-columnblock
table-column-groupblock
table-cellblock
table-captionblock
table-header-groupblock
table-footer-groupblock
flexflex, pero la propiedad no tendrá ningún float efecto sobre esos elementos.
inline-flexinline-flex, pero la propiedad no tendrá ningún float efecto sobre esos elementos.
Aparte de esoSin 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

ChromeFirefoxEIÓperaSafari
1.01.04.07.01.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.

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.