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