Como fazer - Limpar floats (Clearfix)
Aprenda como limpar floats com o hack "clearfix".
Como limpar floats (Clearfix)
Elementos após um elemento flutuante fluirão ao redor dele. Use o hack "clearfix" para corrigir o problema:
Sem Clearfix
Com Clearfix
O hack do clearfix
Se um elemento for mais alto que o elemento que o contém e estiver flutuando, ele transbordará para fora de seu contêiner.
Em seguida, podemos adicionar overflow: auto;
ao elemento contido para corrigir esse problema:
Exemplo
.clearfix {
overflow: auto;
}
The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars). The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
Tip: Learn more about floats in our CSS Float Tutorial.