O que é um Clearfix?

A limpeza de carros alegóricos em um navegador é importante para muitos desenvolvedores. Um Clearfix é uma propriedade CSS (mais comumente conhecida como hack) que é usada para limpar ou consertar os elementos filhos de uma classe sem exigir quaisquer marcas adicionais. Limpa os bugs que ocorrem quando dois elementos flutuantes se empilham.

O uso da propriedade Clearfix pode ajustar automaticamente o elemento pai de acordo com o elemento filho e corrigir os problemas em um código HTML através de alguns atributos como “transbordar”Isso controla as dimensões dos elementos pais e filhos sem exigir marcas adicionais.

Uso da propriedade Clearfix

Vamos entender o uso de uma propriedade ClearFix para saber o que ela faz com a saída adicionando uma propriedade CSS Clearfix em um snippet de código HTML:

Sem propriedade Clearfix

Vamos executar um snippet de código sem executar a propriedade Clearfix para entender o tipo de problema que o Clearfix é capaz de resolver:

Crie uma classe em HTML que insere uma imagem em um contêiner de div:

Texto…

A seguir, o código CSS para o HTML acima:

Isso gerará a saída de tal maneira que a classe infantil que contenha a imagem transborde fora do contêiner. Em situações como essa, a propriedade Clear Fix pode ser usada para limpar ou corrigir esse problema facilmente:

Com a propriedade Clearfix

Para corrigir o problema, podemos simplesmente adicionar um transbordar atribuir com o valor igual a auto Isso ajustará o contêiner pai de acordo com o tamanho do elemento filho:

Aqui neste trecho de código, a classe pai é o contêiner e a imagem é inserida em sua classe infantil:

Texto…

A adição de uma propriedade Clearfix expandirá automaticamente o elemento pai (contêiner) de acordo com o tamanho do elemento filho que é a imagem inserida:

É assim que uma propriedade Clearfix em HTML funciona.

Conclusão

Uma propriedade Clearfix é usada para ajustar os elementos filhos em HTML de acordo com os elementos pais com uma propriedade simples Clearfix sem exigir marcas adicionais. O uso do CSS Clearfix aumenta ou diminui as dimensões dos elementos pais para ajustá -los de acordo com as dimensões dos elementos filhos.