Flutuação com vento de cauda

Nosso objetivo neste artigo é fornecer uma análise aprofundada da classe float do Tailwind .

Com Tailwind CSS , o “float” é uma ferramenta versátil que facilita a flutuação de elementos à esquerda ou à direita de seus contêineres.

Essa classe é especialmente valiosa para projetar layouts de várias colunas, nos quais você pode exigir que os elementos flutuem para a esquerda ou para a direita de acordo com seus requisitos de design.

Índice-

Classes Flutuantes Tailwind

Aulas Visão geral
flutuar à direita Um elemento flutua à direita de seu contêiner usando esta classe.
float-esquerda Essa classe flutua um elemento à esquerda de seu contêiner.
flutuante-nenhum Essa classe redefine a propriedade float para um elemento e impede que qualquer texto ou conteúdo que o siga seja agrupado em torno dele.

Tailwind float-right

Depois de adicionar a classe “float-right” a um elemento HTML no Tailwind CSS, o elemento será alinhado à direita de seu contêiner, fazendo com que qualquer texto ou conteúdo subsequente o envolva adequadamente.

Sintaxe

<element class="float-right">....</element>

Este exemplo ilustra o uso da classe “ float-right ” no Tailwind CSS:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<center>
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-3 text-slate-800">float-right Class in Tailwind CSS</p>
<div class="mx-10">
<img class="float-right p-2 border-2 w-32 ml-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg">
<p class="text-justify">
Nulla sed pellentesque enim, vitae iaculis sem. Nulla facilisi.
Etiam sed odio at nibh cursus lobortis. Ut consectetur est sed
turpis fermentum hendrerit. Duis rutrum massa odio, ut placerat
eros posuere vitae. Etiam euismod egestas dui, sed imperdiet
elit aliquam vel. Morbi non diam hendrerit, pulvinar justo sit
amet, pellentesque ipsum. Maecenas ex eros, mollis tincidunt est
eget, condimentum bibendum libero. Integer egestas sem sem,
vitae tristique erat fringilla id. Vivamus mollis pharetra metus,
quis dictum ipsum tristique ac. Sed pulvinar suscipit odio.
</p>
</div>
</center>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tailwind float-left

Se você aplicar a classe “ float-left ” a um elemento, ele será posicionado à esquerda de seu contêiner e qualquer texto ou outro conteúdo ao seu redor será quebrado.

Sintaxe

<element class="float-left"">....</element>
O exemplo a seguir visa demonstrar o uso da classe “ float-left ” no Tailwind CSS:

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<center>
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-3 text-slate-800">float-left Class in Tailwind CSS</p>
<div class="mx-10">
<img class="float-left p-2 border-2 w-32 mr-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg">
<p class="text-justify">
Nulla sed pellentesque enim, vitae iaculis sem. Nulla facilisi.
Etiam sed odio at nibh cursus lobortis. Ut consectetur est sed
turpis fermentum hendrerit. Duis rutrum massa odio, ut placerat
eros posuere vitae. Etiam euismod egestas dui, sed imperdiet
elit aliquam vel. Morbi non diam hendrerit, pulvinar justo sit
amet, pellentesque ipsum. Maecenas ex eros, mollis tincidunt est
eget, condimentum bibendum libero. Integer egestas sem sem,
vitae tristique erat fringilla id. Vivamus mollis pharetra metus,
quis dictum ipsum tristique ac. Sed pulvinar suscipit odio.
</p>
</div>
</center>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Tailwind float-no

Quando a classe float-none do Tailwind é aplicada a um elemento, qualquer float aplicado anteriormente será removido e o elemento será renderizado em sua posição padrão de acordo com o fluxo do documento. Esta é a classe padrão.

Sintaxe

<element class="float-none">....</element>

Você pode consultar o exemplo abaixo para uma compreensão adequada da classe float-none :

Example: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html><head>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="text-center">
<center>
<h1 class="text-gray-600 text-2xl font-semibold">
MrExamples
</h1>
<p class="font-medium my-3 text-slate-800">float-none Class in Tailwind CSS</p>
<div class="mx-10">
<img class="float-none p-2 border-2 w-32 mr-2 rounded" src="https://mrexamples.com/wp-content/uploads/2023/02/tailwind2.jpg">
<p class="text-justify">
Nulla sed pellentesque enim, vitae iaculis sem. Nulla facilisi.
Etiam sed odio at nibh cursus lobortis. Ut consectetur est sed
turpis fermentum hendrerit. Duis rutrum massa odio, ut placerat
eros posuere vitae. Etiam euismod egestas dui, sed imperdiet
elit aliquam vel. Morbi non diam hendrerit, pulvinar justo sit
amet, pellentesque ipsum. Maecenas ex eros, mollis tincidunt est
eget, condimentum bibendum libero. Integer egestas sem sem,
vitae tristique erat fringilla id. Vivamus mollis pharetra metus,
quis dictum ipsum tristique ac. Sed pulvinar suscipit odio.
</p>
</div>
</center>
</body>
</html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Agora você sabe como usar classes float em CSS tailwind

Nós valorizamos o seu feedback.
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
+1
0
Assine a nossa newsletter
Digite seu e-mail para receber um resumo semanal de nossos melhores posts. Saber mais!
ícone
Ao assinar, você concorda com nossa política de privacidade e nossos termos de serviço.