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.
<!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.
<!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.
<!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