Posicionamento com float e clear - HTML e CSS

Posicionamento com float e clear

Em nosso layout, precisamos colocar o menu abaixo da busca e alinhado à esquerda com a imagem principal ao lado de ambos. Como conseguir este resultado? Uma solução seria utilizarposition no menu, mas é algo que quebraria facilmente nosso layout caso a busca aumentasse de tamanho.

Em um dos nossos primeiros exercícios com a páginasobre.html, colocamos a imagem da família Pelho à direita com a propriedade float, fazendo com que o elemento parágrafo a contornasse. Vamos tentar aplicar float à busca e ao menu para que ambos fiquem à esquerda, fazendo com que a imagem central os contorne:

.busca,
.menu-departamentos {
  float: left;
}



O resultado não foi o esperado. Para resolvermos este problema, precisaremos recorrer à propriedade clear.



A propriedade clear

Existe uma propriedade que determina qual vai ser o comportamento de outros elementos que vêm ao redor daquele que a recebe e estão flutuando, e essa propriedade é a clear. A propriedade clear quer dizer "limpe o fluxo do documento ao meu lado" e pode receber os valores left, right ou both.

O valor left impede que elementos flutuantes fiquem à esquerda do elemento que recebe essa propriedade, o valor rightimpede que elementos flutuem à direita desse, e o valor bothimpede que elementos flutuem em ambos os lados do elemento. É importante sabermos que a propriedade clear de um elemento só interfere no layout da página caso outros elementos à sua volta estiverem flutuando.

Ao aplicarmos clear:left em nosso menu, ele não ficará ao lado da nossa busca com propriedade float e será renderizado na linha seguinte:

.busca,
.menu-departamentos {
  float: left;
}

.menu-departamentos {
  clear: left;
}