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 por meio de alguns atributos como “ transbordar ” que controla as dimensões dos elementos pai e filho sem exigir marcações 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 trecho de código HTML:
Sem Propriedade Clearfix
Vamos executar um trecho 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 div:
< div aula = 'limpeza' >
< br >< img aula = 'img' origem = 'imagem.png' tudo = 'imagem' largura = '250' altura = '180' >
Texto...
< / div >
A seguir está o código CSS para o HTML acima:
.clearfix {
fronteira : 3px sólido #2baa12 ;
preenchimento : 5px ;
}
.img {
flutuador : esquerda ;
}
Isso gerará a saída de forma que a classe filha que contém a imagem transborde para fora do contêiner. Em situações como essa, a propriedade clear fix pode ser usada para limpar ou corrigir esse problema facilmente:
Com Propriedade Clearfix
Para corrigir o problema, podemos simplesmente adicionar um transbordar atributo com o valor igual a auto que irá ajustar o container pai de acordo com o tamanho do elemento filho:
.clearfix {
fronteira : 3px sólido #2baa12 ;
preenchimento : 5px ;
}
.clearfix {
transbordar : auto ;
}
.img {
flutuador : esquerda ;
}
Aqui neste trecho de código, a classe pai é o container e a imagem é inserida em sua classe filha:
< div aula = 'limpeza' >< br >< img aula = 'img' origem = 'imagem.png' tudo = 'imagem' largura = '250' altura = '180' >
Texto...
< / div >
Adicionar uma propriedade clearfix expandirá automaticamente o elemento pai (container) de acordo com o tamanho do elemento filho que é a imagem inserida:
É assim que funciona uma propriedade Clearfix em HTML.
Conclusão
Uma propriedade clearfix é usada para ajustar os elementos filho em HTML de acordo com os elementos pai com uma propriedade clearfix simples sem exigir marcações 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.