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/