Propriedade Float

Assim, é possível posicionar uma figura ao lado da outra e criar uma galeria de imagens, simplesmente usando a propriedade float, como mostrado na Figura 14. Veja também, na Figura 14, que com o uso da propriedade float não foi necessário posicionar cada figura individualmente.

Entretanto, para evitar que um elemento definido após um elemento com a propriedade float seja afetado (ou seja, posicionado do lado dele), é necessário utilizar a propriedade clear:both;.

Como exemplo, veja novamente a Figura 14, a posição do parágrafo que vem após a última imagem é afetada porque a última imagem é estilizada para se posicionar à esquerda do próximo elemento, assim, o próximo elemento, que é um parágrafo, fica à sua direita. Portanto, para posicionar o parágrafo abaixo das figuras, e não ao lado delas, é necessário usar a propriedade clear:both no parágrafo. Faça o teste!

No quadro a seguir, são listados os possíveis valores para clear e float.

Agora, você sabe três formas de posicionar os elementos um do lado do outro, mas isso ainda não é tudo. Na próxima aula, você aprenderá a usar os elementos <div> e <span> (que você viu, rapidamente, na Aula 2 desta disciplina) para agrupar elementos diferentes e posicioná-los na janela de maneira muito mais elegante, por meio da criação de layouts.