Skip to content
Related Articles

Related Articles

Foundation CSS Float Classes

View Discussion
Improve Article
Save Article
  • Last Updated : 09 Mar, 2022
View Discussion
Improve Article
Save Article

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

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

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

Foundation CSS Float Classes

Reference link: https://get.foundation/sites/docs/float-classes.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!