HTML5 CSS3: Aula 24, posicionando elementos utilizando clear e float

HTML5 CSS3: Aula 24, posicionando elementos utilizando clear e float.

Dando sequencia a vídeo aula anterior, estamos posicionando os elementos da aba sobre do nosso projeto (site). Agora utilizando as propriedades float e clear.

Com a propriedade float você indica onde deve se posicionar o elemento em em questão, como por exemplo, a direita da página ou a esquerda (right ou left respectivamente).

Já a propriedade clear, serve para dizer que nenhum elemento estará "flutuando" ao lado do elemento em questão. Por exemplo, no exemplo abaixo eu estou dizendo que nenhum outro elemento estará ao lado direito da classe "exemplo".

.exemplo {

     float: right;

     clear: right;

}

Posicionando assim o elemento em questão, utilizando as propriedades float e clear juntas (igual no exemplo acima) é certeza  que o elemento em questão, que pode ser o menu lateral de um blog, sempre estará a direita. Já no exemplo abaixo, eu digo que o elemento estará posicionado no lado esquerdo e, a sua esquerda, não poderá flutuar nenhum elemento a esquerda, assim como o menu de algumas lojas.

.exemplo {

     float: left;

     clear: left;

}

Código fonte CSS (dessa aula) sobre.css:

 .paragrafos {

     text-align: justify;

     font-size: 10px;

     font-weight: bold;

}

.transform {

     float: right;

}

.decoration {

     float: right;

     clear: right;

}

Código fonte CSS (dessa aula) roca.css:

#rodape {

     [...]

     clear: both;

}

A propriedade clear, quando acompanhada do valor both, impede que elementos flutuem de ambos os lados.