Que métodos de proibição de circulação (clearing) conhece e onde são aplicados?

• clear: both;: O método mais comum e fiável. Aplica-se a um elemento que deve ficar abaixo de todos os elementos flutuantes anteriores. Pode ser um elemento vazio separado ou um dos elementos do layout.
• Adicionar um elemento vazio com clear: both;: Às vezes usado para garantir a eliminação do fluxo, especialmente ao trabalhar com layouts complexos. É um div vazio ou outro elemento de bloco.
• Pseudo-elemento :after com clear: both;: Abordagem mais moderna. Aplica-se ao contêiner de elementos flutuantes. Cria um "elemento virtual" após o conteúdo final do contêiner, eliminando assim o fluxo interno.

/* Exemplo de uso do pseudo-elemento :after */
.container::after {
  content: ""; /* Propriedade obrigatória para pseudo-elementos */
  display: table; /* Comumente usado para melhor compatibilidade */
  clear: both;
}

• overflow: hidden; ou overflow: auto;: Aplica-se ao contêiner de elementos flutuantes. Cria um novo contexto de formatação de bloco que "limpa" o fluxo interno. No entanto, isso pode cortar o conteúdo ou criar barras de rolagem se o conteúdo exceder os limites do contêiner.
• Contexto de formatação de bloco (BFC): Todos os métodos acima, exceto o elemento vazio explícito, criam de alguma forma um novo BFC, levando à eliminação do fluxo. Propriedades que criam BFC:
  • float (valor diferente de zero)
  • overflow (valor diferente de visible)
  • display: inline-block
  • position: absolute ou fixed
  • display: flow-root; (relativamente novo, cria explicitamente um BFC)

Tabela comparativa de métodos:

Método	Aplicação a quê	Método de eliminação	Problemas potenciais
clear: both;	Elemento	Eliminação explícita	Elemento adicional
Elemento vazio + clear	Elemento vazio	Eliminação explícita	Elemento adicional
:after + clear	Contêiner	Pseudo-elemento	Mais difícil de entender para iniciantes
overflow: hidden/auto;	Contêiner	Criação de BFC	Recorte / barras de rolagem
Criar BFC com outra propriedade	Contêiner	Criação de BFC	Não intencional, efeitos colaterais
display: flow-root;	Contêiner	Criação explícita de BFC	Suporte incompleto em navegadores antigos

Onde se aplicam:

• Para que um elemento após elementos flutuantes comece a ser exibido abaixo deles.
• Para que um contêiner contendo apenas elementos flutuantes não colapse em altura.
• Em layouts complexos para controlar o fluxo do documento ao redor de elementos flutuantes.