Alinhamento em folhas de estilo - CSS
Veremos como melhorar o posicionamento dos elementos de uma página web e também como fazer objetos "flutuarem" na página.
Faça os elementos flutuarem
Aqui temos mais uma tradução livre do ótimo material encontrado na W3Schools. Iremos direto ao assunto, sem rodeios, pois já temos uma boa introdução nos artigos anteriores. Portanto, se precisar, leia tais artigos nos links abaixo:
Podemos fazer os elementos "flutuarem" horizontalmente. Ou seja, um elemento só pode ser "jogado" para a esquerda ou para a direita, nunca para cima ou para baixo. Um elemento "flutuante" irá o máximo possível para a esquerda ou para a direita. Geralmente isso significa que irá para a extremidade horizontal da página.
Os elementos que estiverem depois do elemento flutuante fluirão ao redor dele. Os elementos que estiverem antes do elemento flutuante não serão afetados.
Se uma imagem é "jogada" para a direita, o texto que vem em sequência flui em torno dela, à esquerda (e vice-versa).
Um exemplo simples:
Também é possível fazer vários elementos flutuarem um ao lado do outro. Isto ocorrerá se houver espaço suficiente na página. Basta usar a propriedade "Float" para os vários elementos. Por exemplo, usando a configuração mostrada abaixo teremos uma galeria de imagens:
É possível eliminar o fluxo ao redor de um elemento. Traduzindo: talvez você não deseje que os elementos depois do elemento flutuante fluam em torno dela. Para evitar isso, use a propriedade clear. Tal propriedade indica quais os lados de um determinado elemento não são permitidos para outros elementos flutuantes.
Como exemplo, vamos adicionar uma linha de texto para a galeria de imagens que usamos acima. Para isso, usamos a propriedade "clear":
Float
Usando esta opção de configuração de CSS, o Float, um elemento pode ser "jogado" para a esquerda ou para a direita. Daí, os demais elementos irão fluir em torno dele. O Float é muito usado para imagens, mas também é útil quando pensamos sobre layouts.Podemos fazer os elementos "flutuarem" horizontalmente. Ou seja, um elemento só pode ser "jogado" para a esquerda ou para a direita, nunca para cima ou para baixo. Um elemento "flutuante" irá o máximo possível para a esquerda ou para a direita. Geralmente isso significa que irá para a extremidade horizontal da página.
Os elementos que estiverem depois do elemento flutuante fluirão ao redor dele. Os elementos que estiverem antes do elemento flutuante não serão afetados.
Se uma imagem é "jogada" para a direita, o texto que vem em sequência flui em torno dela, à esquerda (e vice-versa).
Um exemplo simples:
img
{
float: right;
}
{
float: right;
}
Também é possível fazer vários elementos flutuarem um ao lado do outro. Isto ocorrerá se houver espaço suficiente na página. Basta usar a propriedade "Float" para os vários elementos. Por exemplo, usando a configuração mostrada abaixo teremos uma galeria de imagens:
.figuras
{
float: right;
width: 200px;
height:; 150px
margin: 4px;
}
{
float: right;
width: 200px;
height:; 150px
margin: 4px;
}
É possível eliminar o fluxo ao redor de um elemento. Traduzindo: talvez você não deseje que os elementos depois do elemento flutuante fluam em torno dela. Para evitar isso, use a propriedade clear. Tal propriedade indica quais os lados de um determinado elemento não são permitidos para outros elementos flutuantes.
Como exemplo, vamos adicionar uma linha de texto para a galeria de imagens que usamos acima. Para isso, usamos a propriedade "clear":
.text_line
{
clear: both;
}
{
clear: both;
}