CSS

Float e Clear

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

.imagem{
    float: right;
}

Podemos utilizar a propriedade float. Esta propriedade pode receber dois valores: left e right.

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 right impede que elementos flutuem à direita desse, e o valor both impede 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.

.busca{
    clear: left;
}