Tachyons Layout Clearfix
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/
Please Login to comment...