O Em Busca do Código é um site em formato de plataforma de ensino a distância (EAD), plataforma esta totalmente aberta e gratuita. Construido de maneira independente e individual, este layout é baseado neste curso.

Os vídeos deste curso de HTML5 & CSS3 podem contém erros, utilize-o como repositório de códigos fontes (os códigos fontes funcionam). Nosso curso de JavaScript não contém erros.

Publicado em 2015.

Posicionando elementos com clear e float. HTML5 a CSS3 aula 24

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.

Assista ao vídeo:

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: left;
clear: left;
}

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 (completo)

/*sobre.css*/
.paragrafos {
   text-align: justify;
   font-size: 10px;
   font-weight: bold;
}
/*roca.css*/
#rodape {
   [...]
   clear: both;
}

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

Espero que este código fonte tenha sido útil.

Se estiver utilizando bloqueador de propaganda, por favor, coloque este site na lista branca (isto sempre será apenas um pedido). Obrigado pela escolha.