Propiedad flotante CSS
Ejemplo
Deja que una imagen flote a la derecha:
img
{
float: right;
}
Más ejemplos de "Pruébelo usted mismo" a continuación.
Definición y uso
La floatpropiedad especifica si un elemento debe flotar a la izquierda, a la derecha o no flotar en absoluto.
Nota: ¡ Los elementos absolutamente posicionados ignoran la floatpropiedad!
Nota: Los elementos junto a un elemento flotante fluirán a su alrededor. Para evitar esto, use la propiedad clear o el truco clearfix (vea el ejemplo al final de esta página).
| Valor por defecto: | ninguna |
|---|---|
| Heredado: | No |
| Animable: | No. Leer sobre animable |
| Versión: | CSS1 |
| Sintaxis de JavaScript: | objeto .style.cssFloat="izquierda" |
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con la propiedad.
| Property | |||||
|---|---|---|---|---|---|
| float | 1.0 | 4.0 | 1.0 | 1.0 | 7.0 |
Sintaxis CSS
float: none|left|right|initial|inherit;
Valores de propiedad
| Value | Description | Play it |
|---|---|---|
| none | The element does not float, (will be displayed just where it occurs in the text). This is default | |
| left | The element floats to the left of its container | |
| right | The element floats the right of its container | |
| initial | Sets this property to its default value. Read about initial | |
| inherit | Inherits this property from its parent element. Read about inherit |
Más ejemplos
Ejemplo
Deja que una imagen flote a la izquierda:
img
{
float: left;
}
Ejemplo
Deje que la imagen se muestre justo donde aparece en el texto (flotante: ninguno):
img
{
float: none;
}
Ejemplo
Deje que la primera letra de un párrafo flote hacia la izquierda y aplique estilo a la letra:
span {
float: left;
width:
0.7em;
font-size: 400%;
font-family: algerian, courier;
line-height: 80%;
}
Ejemplo
Use flotante con una lista de hipervínculos para crear un menú horizontal:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Ejemplo
Use flotante para crear una página de inicio con un encabezado, pie de página, contenido izquierdo y contenido principal:
.header, .footer {
background-color: grey;
color: white;
padding: 15px;
}
.column {
float: left;
padding: 15px;
}
.clearfix::after {
content: "";
clear: both;
display: table;
}
.menu {width: 25%;}
.content {width: 75%;}
Ejemplo
No permita elementos flotantes a la izquierda o a la derecha de un elemento <p> específico:
img {
float: left;
}
p.clear {
clear: both;
}
Ejemplo
Si un elemento flotante es más alto que el elemento que lo contiene, se desbordará fuera de su contenedor. Es posible arreglar esto con el "pirateo clearfix":
.clearfix::after {
content: "";
clear: both;
display: table;
}
páginas relacionadas
Tutorial de CSS: CSS flotante
Referencia HTML DOM: propiedad cssFloat