Foundation CSS Float Classes

Last Updated : 09 Mar, 2022

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=
"https://cdn.jsdelivr.net/npm/[email protected]/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>

Output:

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=
"https://cdn.jsdelivr.net/npm/[email protected]/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>

Output:

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=
"https://cdn.jsdelivr.net/npm/[email protected]/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>