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
Share your thoughts in the comments
Please Login to comment...