Layout CSS - clear e clearfix
A propriedade clara
Quando usamos a floatpropriedade, e queremos o próximo elemento abaixo (não à direita ou à esquerda), teremos que usar a clear
propriedade.
A clearpropriedade especifica o que deve acontecer com o elemento que está próximo a um elemento flutuante.
A clearpropriedade pode ter um dos seguintes valores:
-
none- O elemento não é empurrado abaixo dos elementos flutuantes à esquerda ou à direita. Isso é padrão -
left- O elemento é empurrado abaixo dos elementos flutuantes à esquerda -
right- O elemento é empurrado abaixo dos elementos flutuantes à direita -
both- O elemento é empurrado abaixo dos elementos flutuantes esquerdo e direito -
inherit- O elemento herda o valor clear de seu pai
Ao limpar floats, você deve combinar o clear com o float: Se um elemento flutuar para a esquerda, então você deve limpar para a esquerda. Seu elemento flutuante continuará flutuando, mas o elemento desmarcado aparecerá abaixo dele na página da web.
Exemplo
Este exemplo limpa o float para a esquerda. Aqui, significa que o elemento <div2> é empurrado abaixo do elemento <div1> flutuante à esquerda:
div1 {
float: left;
}
div2 {
clear: left;
}
O hack do clearfix
Se um elemento flutuante for mais alto que o elemento que o contém, ele "transbordará" para fora de seu contêiner. Podemos então adicionar um hack clearfix para resolver este problema:
Sem Clearfix
Com Clearfix
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;
}
You will learn more about the ::after pseudo-element in a later chapter.