Como remover flutuação (Clearfix)
- Página anterior Altura igual
- Próxima página Flutuante responsivo
Aprenda a usar a técnica clearfix para remover flutuação.
Como remover flutuação (Clearfix)
Os elementos atrás do elemento flutuante fluirão ao redor dele. Use a solução de clearfix para resolver o problema:
Sem Clearfix
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
Uso de Clearfix
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet...
Técnica clearfix
Se um elemento for mais alto que o elemento que o contém e estiver flutuando, ele se sobrepõe ao seu contêiner.
Então, podemos adicionar overflow: auto; ao elemento contido para resolver este problema:
Exemplo
.clearfix {
overflow: auto;
}
Se você puder controlar a margem externa e a margem interna,overflow: auto; O efeito de remoção de flutuação é bom (senão, você pode ver a barra de rolagem).
No entanto, a técnica moderna de clearfix é mais segura para usar, a maioria dos sites usa o seguinte código:
Exemplo
.clearfix::after {
content: "";
clear: both;
display: table;
}
Páginas relacionadas
Tutorial:Flutuante CSS
- Página anterior Altura igual
- Próxima página Flutuante responsivo
