Limpar CSS no Tailwind
Tailwind clear é uma das classes mais úteis e, neste artigo, vamos explorá-la com exemplos em profundidade.
No Tailwind CSS , a classe Clear indica qual lado de um elemento flutuante não pode ser flutuado. Nesse método, a posição do elemento é determinada ou recuperada em relação a objetos flutuantes.
Nos casos em que o elemento pode ser colocado horizontalmente ao lado de um elemento flutuante, ele será colocado lá.
Seu uso principal é regular o envolvimento do conteúdo em torno de um elemento.
Essa classe aceita vários valores e abrange todas as propriedades no formulário de classe.
Ele serve como uma alternativa à propriedade clear do CSS.
Vento de cauda limpo
Quando você flutua um elemento, ele é retirado do fluxo normal do documento e outros elementos fluem ao seu redor.
Isso pode ser útil para criar layouts, mas também pode causar problemas se você não for cuidadoso.
Se você tiver vários elementos flutuantes, por exemplo, às vezes eles podem se sobrepor ou causar problemas de layout.
A classe clear Tailwind fornece uma maneira fácil de controlar como os elementos flutuantes são limpos.
Você pode usá-lo para forçar um elemento a aparecer abaixo de qualquer elemento flutuante que venha antes dele.
Classes claras de vento de cauda
| Aulas | Visão geral |
| claro-esquerda | Esta classe limpa o float esquerdo. Ele força um elemento a aparecer abaixo de quaisquer elementos flutuados à esquerda que venham antes dele. |
| claro-certo | Esta classe limpa o flutuador direito. Ele força um elemento a aparecer abaixo de qualquer elemento flutuado à direita que venha antes dele. |
| limpar ambos | Esta classe limpa os floats esquerdo e direito. Ele força um elemento a aparecer abaixo de quaisquer elementos flutuantes que venham antes dele. |
| claro-nenhum | Esta classe não limpa nenhum float. Ele deixa um elemento no fluxo normal do documento, permitindo que outros elementos fluam ao seu redor. |
Tailwind Clear-left
Essa classe impede que os elementos flutuem à esquerda de outro elemento.
Sintaxe
<element class="clear-left">....</element>
Este exemplo destaca o uso da classe clear-left no Tailwind:
Example:
Tailwind Clear-right
Essa classe impede que os elementos flutuem à direita de outro elemento.
Sintaxe
<element class="clear-right">....</element>
Abaixo está um exemplo correspondente à classe clear-right no Tailwind:
Example:
Tailwind Clear-ambos
Essa classe impede que os elementos flutuem em ambos os lados do outro elemento.
Sintaxe
<element class="clear-both">....</element>
Este exemplo fornece uma visão geral prática da classe clear-both no Tailwind:
Example:
Tailwind Clear-nenhum
Esta classe permite que os elementos flutuem em ambos os lados de outro elemento.
Sintaxe
<element class="clear-none">....</element>
Aqui está um exemplo que se concentra na classe clear-none no Tailwind:
Example:
