La propiedad flotante de CSS se utiliza para colocar los elementos a la izquierda, a la derecha de su contenedor, además de permitir que el texto y los elementos en línea se ajusten a su alrededor. La propiedad float define el flujo de contenido en la página. Los elementos restantes formarán parte del flujo si el elemento se elimina del flujo normal del contenido. Esta propiedad es ignorada por los elementos absolutamente posicionados. Se puede escribir en un archivo CSS o se puede especificar directamente en el estilo de un elemento.
Sintaxis:
float: none|left|right|initial|inherit;
Valores de propiedad:
- ninguno : este es el valor predeterminado y el elemento no flota.
- left : el elemento flota en el lado izquierdo del contenedor.
- right : el elemento flota en el lado derecho del contenedor.
- El elemento inicial se establecerá en su valor predeterminado.
- heredar : el elemento hereda la propiedad flotante de su propiedad principal.
Usaremos los valores de propiedad anteriores y comprenderemos su uso a través del ejemplo.
izquierda: el elemento se colocará en el lado izquierdo de su bloque contenedor.
HTML
<!DOCTYPE html> <html> <head> <title>Float</title> </head> <body> <div class="GFG" style="font-size:40px; color:#006400; float:left;"> GeeksforGeeks </div> </body> </html>
Salida :
right: el elemento se colocará en el lado derecho de su bloque contenedor.
HTML
<!DOCTYPE html> <html> <head> <title>Float</title> </head> <body> <div class="GFG" style="font-size:40px; color:#006400; float:right;"> GeeksforGeeks </div> </body> </html>
Salida :
ninguno: el elemento permanece igual que cuando se declaró, es decir, no tendrá ningún efecto sobre el elemento y este es el valor predeterminado.
HTML
<!DOCTYPE html> <html> <head> <title>Float</title> </head> <body> <div class="GFG" style="font-size:40px; color:#006400; float:none;"> GeeksforGeeks </div> </body> </html>
Producción:
heredar : se utiliza para heredar una propiedad a un elemento del valor de propiedad de su elemento principal.
HTML
<!DOCTYPE html> <html> <head> <title>Float</title> </head> <body> <div style="float:right"> <div class="GFG" style="font-size:40px; color:#006400; float:inherit;"> GeeksforGeeks </div> </div> </body> </html>
Salida :
Navegadores compatibles:
- Google Chrome 1.0
- Microsoft Edge 12.0
- Firefox 1.0
- Internet Explorer 4.0
- Safari 1.0
- Ópera 7.0
Publicación traducida automáticamente
Artículo escrito por Kartikaybhutani y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA