En este artículo, aprenderemos sobre la propiedad flotante de CSS con ejemplos adecuados de todos los atributos disponibles.
La propiedad float se usa para cambiar el flujo normal de un elemento. Define cómo debe flotar un elemento y colocar un elemento en el lado derecho o izquierdo de su contenedor.
La sintaxis general de la propiedad float.
float: none|inherit|left|right|initial;
Nota: el valor predeterminado de la propiedad flotante es ninguno y no funcionará con el elemento posicionado absolutamente.
Valores de propiedad del flotador
| Valor | Descripción |
|---|---|
| ninguna | Es el valor predeterminado de una propiedad flotante. El elemento no debe flotar. |
| heredar | La propiedad debe ser heredada de su elemento padre. |
| izquierda | Coloque un elemento a la derecha de su contenedor. |
| Correcto | Coloque un elemento a la izquierda de su contenedor. |
| inicial | La propiedad se establece en su valor predeterminado. |
Ejemplo de la propiedad flotante utilizando el valor flotante izquierdo.
En el siguiente ejemplo, usamos el valor flotante izquierdo. Después de usar este valor, el elemento debe dejarse en su contenedor como se muestra en la imagen a continuación.
flotador izquierdo
HTML
<!DOCTYPE html>
<html>
<head>
<title>Float Left</title>
<style>
img {
float:left; /* element must be left on its container */
height: 100px;
}
div{
width:300px;
height: 220px;
box-shadow: 0px 2px 2px 2px;
}
</style>
</head>
<body>
<div>
<h1> float left...</h1>
<p>The below picture must be left on its container.</p>
<img src="https://img.icons8.com/color/452/GeeksforGeeks.png">
<p>The GeeksforGeeks is the portal for geeks
that contain computer science and programming
articles. </p>
</div>
</body>
</html>
Ejemplo de la propiedad flotante usando el valor flotante a la derecha.
En el siguiente ejemplo, usamos el valor flotante a la derecha. Después de usar este valor, el elemento debe estar justo en su contenedor, como se muestra en la imagen a continuación.
flotar derecho
HTML
<!DOCTYPE html>
<html>
<head>
<title>Float Right</title>
<style>
img {
float:right; /* element must be right on its container */
height: 100px;
}
div{
width:300px;
height: 220px;
box-shadow: 0px 2px 2px 2px;
}
</style>
</head>
<body>
<div>
<h1> float right...</h1>
<p>The below picture must be right on its container.</p>
<img src="https://img.icons8.com/color/452/GeeksforGeeks.png">
<p>The GeeksforGeeks is the portal for geeks
that contain computer science and
programming articles. </p>
</div>
</body>
</html>
propiedad float con un elemento absolutamente posicionado.
En el siguiente ejemplo, veremos que la propiedad flotante no funcionará con un elemento posicionado absolutamente.
posición:absoluta;
HTML
<!DOCTYPE html>
<html>
<head>
<title>Float</title>
<style>
img {
float:right; /* It won't work because element is absolutely positioned */
height: 100px;
position: absolute;
}
div{
width:300px;
height: 230px;
box-shadow: 0px 2px 2px 2px;
}
</style>
</head>
<body>
<div>
<h1> float with absolutely positioned element.</h1>
<p>floating won't work</p>
<img src="https://img.icons8.com/color/452/GeeksforGeeks.png">
<p>The GeeksforGeeks is the portal for
geeks that contain computer
science and programming articles. </p>
</div>
</body>
</html>
La propiedad float de CSS se usa antes que flexbox y grid. Hoy queremos un sitio web compatible con dispositivos móviles. El flexbox es más eficiente que el flotador.
Estas son las siguientes razones para usar flexbox en lugar de flotadores.
- Posicionar elementos secundarios se vuelve más fácil con flexbox.
- flexbox es receptivo y compatible con dispositivos móviles.
- Los márgenes del contenedor flexible no colapsan con los márgenes de su contenido.
- podemos cambiar fácilmente el orden de los elementos en nuestra página web sin siquiera hacer cambios en HTML.
Conclusión: en este artículo, aprendimos la propiedad flotante de CSS con valores disponibles y ejemplos adecuados.
Publicación traducida automáticamente
Artículo escrito por vikashgautam11 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA