Que métodos de bloqueio de fluxo (clearing) conhece e em que situações são aplicados?

• overflow: hidden; ou overflow: auto;: Aplica-se ao elemento pai de um elemento(s) com float. Cria um novo contexto de formatação de bloco (BFC), fazendo com que o pai inclua os elementos que o rodeiam na sua altura.

Situação: A forma mais simples quando é necessário esconder conteúdo que ultrapassa os limites do elemento ou aplicar rolagem, mas também funciona como método de limpeza.

• clear: both;: Aplica-se a um elemento que não deve envolver os elementos anteriores com float. Este elemento será colocado abaixo de todos os elementos que o rodeiam.

Situação: Quando é necessário criar uma nova linha ou secção após elementos que se envolvem mutuamente.

• Método clearfix (pseudo-elementos ::after): Adiciona um pseudo-elemento ao contêiner pai com propriedades específicas, imitando o comportamento de clear: both;, mas sem necessidade de adicionar elementos HTML adicionais.

.clearfix::after {
    content: ""; /* Conteúdo obrigatório para mostrar o pseudo-elemento */
    display: table; /* Cria um novo contexto de bloco, como overflow: hidden; */
    clear: both; /* Aplica a limpeza */
}

Situação: A forma mais comum e recomendada de limpeza, que é limpa e não quebra a estrutura do marcado. Aplica-se ao elemento pai que contém elementos que o rodeiam.

• Uso de display: flex ou display: grid: Métodos modernos de layout que não requerem envolvimento para posicionar elementos, eliminando assim a necessidade de limpeza. Situação: Ao construir layouts complexos ou quando é necessário um controlo mais flexível da disposição dos elementos.

• Adicionar um elemento adicional com clear: both; (método antigo): Insere um elemento HTML vazio após os elementos que o rodeiam e aplica-lhe clear: both;. Situação: Considerado um método obsoleto e indesejável, pois adiciona HTML redundante.