Open In App

Tachyons Layout Floats

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will learn about floats using the Tachyons toolkit. Tachyon is a toolkit used to develop a responsive website. Float is used to specify whether an element should float to the left, right, or not at all.

Tachyons Layout Floats Classes:

  • fr: This float-right (fr) class is used to float elements to the right. 
  • fl: This float-left(fl) class is used to float elements to the left.
  • fn: This float-none(fn) class is used to float elements to nowhere. 

Syntax:

<div class="fr">
   ...
</div>

Example 1: In the below code, we will use the float-right fr class to float the div element to the right.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
  
    <style>
        div {
            text-align: center;
            background-color: lightgreen;
            width: 150px;
            height: 150px;
        }
    </style>
</head>
  
<body>
    <h2 style="color:green; text-align:center;">
        GeeksforGeeks
    </h2>
      
    <h3 style="text-align:center;">
        A computer science portal for geeks
    </h3>
  
    <div class="fr">gfg</div>
</body>
  
</html>


Output:

 

Example 2: In the below code, we will use the float-left fl class to float the div element to the left.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
  
    <style>
        div {
            text-align: center;
            background-color: lightgreen;
            width: 150px;
            height: 150px;
        }
    </style>
</head>
  
<body>
    <h2 style="color:green; text-align:center;">
        GeeksforGeeks
    </h2>
      
    <h3 style="text-align:center;">
        A computer science portal for geeks
    </h3>
  
    <div class="fl">gfg</div>
</body>
  
</html>


Output: 

 

Example 3: In the below code we will use the float-none fn class to float the div element to nowhere.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link rel="stylesheet" href=
  
    <style>
        div {
            text-align: center;
            background-color: lightgreen;
            width: 150px;
            height: 150px;
        }
    </style>
</head>
  
<body>
    <h2 style="color:green; text-align:center;">
        GeeksforGeeks
    </h2>
      
    <h3 style="text-align:center;">
        A computer science portal for geeks
    </h3>
  
    <div class="fn">gfg</div>
</body>
  
</html>


Output: 

 

Reference: https://tachyons.io/docs/layout/floats/



Last Updated : 26 Jun, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads