Open In App

Tachyons Layout Clearfix

Improve
Improve
Like Article
Like
Save
Share
Report

Tachyon is a toolkit that is used to create a responsive website. In this article, we will learn how to define any layout using the Tachyons toolkit.

Every website is divided into various parts like a header, menus, content, and a footer. Tachyons Layout is used to define those sub-parts of a website.

Layout Clearfix: These classes are used to prevent layout problems caused by the elements being removed from the block context of the surrounding elements.

Classes Used:

  • cf:before: This class is used to clear the floating before the element.
  • cf:after: This class is used to clear the floating after the element.
  • cf: This class is used to fix the floating property of the element.

Syntax:

<element-name class="class-name">
   ...
</element-name>

Example 1: In the below code, we will make a floating error and try to fix it in the next example with the help of the above classes.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>GFG</title>
    <link rel="stylesheet" href=
  
    <style>
        body {
            text-align:center;
            margin:20px;
            background-color:lightgrey;
        }
        h1 {
            color:green;
        }    
    </style>
</head>
  
<body>
    <h1> GeeksforGeeks</h1>
    <h3> A computer science portal for geeks</h3>
    <div  style="outline:7px solid black">
        <div class="fl w-60 pv4" 
             style=" background-color:green">GfG</div>
        <div class="fl w-40 pv4" 
             style=" background-color:lightgreen">GfG</div>        
    </div>
</body>
</html>


Output:

 

Example 2: In the below code, we will make use of the cf class to fix the floating property.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>GFG</title>
    <link rel="stylesheet" href=
  
    <style>
        body {
            text-align: center;
            margin: 20px;
            background-color:lightgrey;
        }
  
        h1 {
            color: green;
        }    
    </style>
</head>
  
<body>
    <h1> GeeksforGeeks</h1>
    <h3> A computer science portal for geeks</h3>
    <div class="cf" style="outline:7px solid black">
        <div class="fl w-60 pv4" 
             style=" background-color:green">GfG</div>
        <div class="fl w-40 pv4" 
             style=" background-color:lightgreen">GfG</div>
    </div>
</body>
</html>


Output:

 

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



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