CSS clearfix

Categoria: Design e Front End

O problema acontece quando um elemento flutuante está dentro de outro elemento, que não força a sua altura automaticamente para ajusatr ao elemento flutuante. Quando um elemento usa a propriedade “float”, seu pai não consegue calcular a altura pois com o float o elemento sai do escopo. Você pode usar 2 métodos para arrumar isto:

  • {clear: both;}
  • clearfix
.clearfix:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}
 
.clearfix {
   display: inline-block;
}
 
html[xmlns] .clearfix {
   display: block;
}
 
* html .clearfix {
   height: 1%;
}

Demonstração


Sobre o Autor
Junior Moro em Campo Grande, Mato Grosso do Sul e sou programador na dothCom.
Posts Relacionados
Comentários