En este artículo, aprenderemos sobre flotadores usando el kit de herramientas Tachyons. Tachyon es un conjunto de herramientas que se utiliza para desarrollar un sitio web receptivo. Float se usa para especificar si un elemento debe flotar a la izquierda, a la derecha o no flotar en absoluto.
Clases de flotadores de diseño de taquiones:
- fr: Esta clase float-right (fr) se usa para hacer flotar elementos a la derecha.
- fl: Esta clase float-left(fl) se usa para hacer flotar elementos a la izquierda.
- fn: Esta clase float-none(fn) se usa para hacer flotar elementos a ninguna parte.
Sintaxis:
<div class="fr"> ... </div>
Ejemplo 1: en el siguiente código, usaremos la clase fr float-right para hacer flotar el elemento div hacia la derecha.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<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>
Producción:
Ejemplo 2: en el siguiente código, usaremos la clase fl float-left para hacer flotar el elemento div hacia la izquierda.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<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>
Producción:
Ejemplo 3: en el siguiente código, usaremos la clase fn float-none para hacer flotar el elemento div a ninguna parte.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href=
"https://unpkg.com/tachyons/css/tachyons.min.css">
<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>
Producción:
Referencia: https://tachyons.io/docs/layout/floats/