
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.
- Característica Box Sizing en CSS
- Característica del Margin en CSS
- Diferencias entre SASS y SCSS
- Característica del Padding en CSS
- Característica de Opacity en CSS
- Característica del Overflow en CSS
- Característica del Color en el CSS
- Característica del Background en CSS
- Característica de Border en CSS
- Característica del CSS Bottom
- Característica del CSS Display
- Características padding en CSS
- ¿Qué es el código CSS y en que se utiliza?
- Característica background-attachment en CSS
- Propiedad clear en CSS
- Característica background-blend-mode en CSS
- Característica background-clip en CSS
- Propiedades float en CSS
- Característica background-color en CSS
- Característica background-image en CSS
- Característica background-origin en CSS
- Característica background-repeat en CSS
- Característica background-size en CSS
- Característica background-position en CSS
- Característica box-shadow en CSS
- Característica border-bottom en CSS
- Característica border-bottom-color en CSS
- Característica border-bottom-style en CSS
- Característica border-bottom-width en CSS
- Característica border-color en CSS
- Característica border-image en CSS
- Característica border-image-outset en CSS
- Característica border-image-repeat en CSS
- Característica border-image-slice en CSS
- Característica border-image-source en CSS
- Características border-image-width en CSS
- Características border-left en CSS
- Característica border-left-color en CSS
- Característica border-left-style en CSS
- Característica border-left-width en CSS
- Característica border-right en CSS
- Características border-right-color en CSS