Foundation CSS es un marco front-end receptivo y de código abierto creado por la fundación ZURB en septiembre de 2011, que facilita el diseño de hermosos sitios web, aplicaciones y correos electrónicos receptivos que se ven increíbles y pueden ser accesibles para cualquier dispositivo. Es utilizado por muchas empresas como Facebook, eBay, Mozilla, Adobe e incluso Disney. El marco se basa en un arranque similar a Saas. Es más sofisticado, flexible y fácilmente personalizable. También viene con CLI, por lo que es fácil de usar con paquetes de módulos. Ofrece la herramienta Fastclick.js para una renderización más rápida en dispositivos móviles.
Las clases flotantes eliminan el elemento del flujo normal de la página y lo colocan en un lado particular de su elemento principal, lo que hace que los demás elementos lo rodeen.
Clases flotantes de Foundation CSS:
- float-left: esta clase elimina el elemento del flujo normal de la página web y lo hace flotar en el lado interior izquierdo del contenedor.
- float-right: esta clase elimina el elemento del flujo normal de la página web y hace que flote en el lado interior derecho del contenedor.
- float-center: esta clase hace que el valor del margen sea automático, por lo que centra el elemento.
Sintaxis:
<div class="float-class">....</div>
Ejemplo 1: El siguiente código demuestra la clase float-left .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content= "width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <title>Float Classes</title> </head> <body class="grid-x grid-padding-x align-center-middle flex-container flex-dir-column" style="width:100vw; height:100vh;"> <h2 style="color:green">GeeksforGeeks</h2> <strong> Foundation CSS Float Classes </strong> <div style="width:40vw; border:2px solid steelblue;"> <div class="float-left grid-x align-center-middle text-center" style="width:10rem; height:5rem; background-color:#267138; color:whitesmoke;"> float-left class </div> <div class="text"> Greetings to all the Geeks out there! We welcome you to the platform where we consistently strive to offer the best of education. This platform has been designed for every geeks wishing to expand knowledge, share their knowledge and is ready to grab their dream job. We have millions of articles, live as well as online courses, thousands of tutorials and much more just for the geek inside you. Thank you for choosing and supporting us! </div> </div> </body> </html>
Producción:
Clases flotantes de CSS de la Fundación
Ejemplo 2: El siguiente código demuestra la clase float-right .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <title>Float Classes</title> </head> <body class="grid-x grid-padding-x align-center-middle flex-container flex-dir-column" style="width:100vw; height:100vh;"> <h2 style="color:green">GeeksforGeeks</h2> <strong> Foundation CSS Float Classes </strong> <div style="width:40vw; border:2px solid steelblue;"> <div class="float-right grid-x align-center-middle text-center" style="width:10rem; height:5rem; background-color:#267138; color:whitesmoke;"> float-right class </div> <div class="text"> Greetings to all the Geeks out there! We welcome you to the platform where we consistently strive to offer the best of education. This platform has been designed for every geeks wishing to expand knowledge, share their knowledge and is ready to grab their dream job. We have millions of articles, live as well as online courses, thousands of tutorials and much more just for the geek inside you. Thank you for choosing and supporting us! </div> </div> </body> </html>
Producción:
Clases flotantes de CSS de la Fundación
Ejemplo 3: El siguiente código demuestra la clase de centro flotante .
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href= "https://cdn.jsdelivr.net/npm/foundation-sites@6.7.4/dist/css/foundation.min.css" crossorigin="anonymous"> <title>Float Classes</title> </head> <body class="grid-x grid-padding-x align-center-middle flex-container flex-dir-column" style="width:100vw; height:100vh;"> <h2 style="color:green">GeeksforGeeks</h2> <strong> Foundation CSS Float Classes </strong> <div style="width:40vw; border:2px solid steelblue;"> <div class="float-center grid-x align-center-middle text-center" style="width:10rem; height:5rem; background-color:#267138; color:whitesmoke;"> float-center class </div> <div class="text"> Greetings to all the Geeks out there! We welcome you to the platform where we consistently strive to offer the best of education. This platform has been designed for every geeks wishing to expand knowledge, share their knowledge and is ready to grab their dream job. We have millions of articles, live as well as online courses, thousands of tutorials and much more just for the geek inside you. Thank you for choosing and supporting us! </div> </div> </body> </html>
Producción:
Clases flotantes de CSS de la Fundación
Enlace de referencia: https://get.foundation/sites/docs/float-classes.html
Publicación traducida automáticamente
Artículo escrito por tejsidda34 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA