Foundation CSS Float Classes
Foundation CSS is an open-source & responsive front-end framework built by ZURB foundation in September 2011, that makes it easy to design beautiful responsive websites, apps, and emails that look amazing & can be accessible to any device. It is used by many companies such as Facebook, eBay, Mozilla, Adobe, and even Disney. The framework is built on Saas-like bootstrap. It is more sophisticated, flexible, and easily customizable. It also comes with CLI, so it’s easy to use it with module bundlers. It offers the Fastclick.js tool for faster rendering on mobile devices.
The float classes remove the element from the normal flow of the page, and place it at a particular side of its parent element, causing the other elements to wrap around it.
Foundation CSS Float Classes:
- float-left: This class removes the element from the normal flow of the web page and makes it float on the inner left side of the container.
- float-right: This class removes the element from the normal flow of the web page and causes it to float on the inner right side of the container.
- float-center: This class makes the margin value auto, thereby centering the element.
Syntax:
<div class="float-class">....</div>
Example 1: The following code demonstrates the float-left class.
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= 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> |
Output:
Foundation CSS Float Classes
Example 2: The following code demonstrates the float-right class.
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= 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> |
Output:
Foundation CSS Float Classes
Example 3: The following code demonstrates the float-center class.
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= 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> |
Output:
Foundation CSS Float Classes
Reference link: https://get.foundation/sites/docs/float-classes.html
.png)
