Layout do CSS - clear e clearfix

Propriedade clear

clear A propriedade especifica quais elementos podem flutuar ao lado do elemento removido e em qual lado.

clear A propriedade pode ser configurada com um dos seguintes valores:

  • none - é permitido que haja elementos flutuantes em ambos os lados. Valor padrão
  • left - não é permitido que haja elementos flutuantes no lado esquerdo
  • right - não é permitido que haja elementos flutuantes no lado direito
  • both - não é permitido que haja elementos flutuantes no lado esquerdo ou direito
  • inherit - o elemento herda o valor de clear de seu pai

usando clear A utilização mais comum da propriedade é no elemento que utilizou float depois da propriedade.

Ao remover a flutuação, deve-se combinar a remoção com a flutuação: se um elemento flutuar para a esquerda, deve-se remover a esquerda. Seus elementos flutuantes continuarão a flutuar, mas o elemento removido será exibido abaixo dele.

O exemplo a seguir removerá a flutuação para a esquerda. Isso indica que não é permitido que haja elementos flutuantes no lado esquerdo do (div):

Exemplo

div {
  clear: left;
}

Experimente você mesmo

Hack de clearfix

Se um elemento é mais alto que o elemento que o contém e é flutuante, ele 'transbordará' para fora de seu contêiner:

Então podemos adicionar overflow: auto; ao elemento contenedor para resolver esse problema:

Exemplo

.clearfix {
  overflow: auto;
}

Experimente você mesmo

Basta você poder controlar a margem externa e interna (senão você pode ver a barra de rolagem), overflow: auto clearfix funcionará bem. No entanto, a nova tecnologia de hack modernos clearfix é mais segura, e o seguinte código é aplicado na maioria dos sites:

Exemplo

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Experimente você mesmo

Você aprenderá isso em capítulos posteriores ::after Elemento pseudo