Site Overlay

Float CSS

A propriedade float é uma das soluções mais versáteis quando se trata de alinhar e posicionar elementos, que teve origem na diagramação de textos no mundo da mídia impressa onde é bastante comum ver imagens flutuando ao lado de pedaços de texto, como em uma matéria de revista. Na web essa técnica evoluiu e soluciona diversos casos de posicionamento de elementos.

O caso mais simples é para alinhar elementos horizontalmente, flutuando parte deles e deixando que o resto acompanhe pela lateral, dessa forma, com o seguinte HTML:

<h2>#1</h2>

<h4>500 pontos</h4>

<p>Prêmio para o campeão: 1 MacBook Pro 15″.</p>

h2 {

float: left;

margin: 0 20px 20px 0;

}

h4 {

margin-top: 5px;

}

Elementos com a propriedade float são tratados como elementos de bloco, mas sem ocupar os 100% de largura tradicionais desses elementos. E da mesma forma que ele pode flutuar para esquerda, ele pode ir para a direita.

h2 {

float: right;

}

Para garantir que um elemento não vá seguir a orientação de um antecessor que esteja com float, você precisa utilizar a propriedade clear. Você pode informar o mesmo sentido que os seus elementos estão flutuando – left ou right – ou utilizar both, que quebra o fluxo em ambos os sentidos.

p {

clear: both;

}

Outra aplicação tradicional da propriedade float é para alinhar imagens e textos, similar a uma matéria de jornal, onde a imagem fica ao lado do texto que a acompanha.

Com um simples uso de float e uma margem (para o texto não ficar colado com a imagem) o texto se posiciona ao lado da imagem, fluindo perfeitamente caso o texto seja muito grande:

img {

float: left;

margin-right: 10px;

}

E da mesma forma que organizamos elementos em exemplo menores, podemos organizar os principais elementos da página utilizando float.

Um elemento com float não contribui com a altura do seu container, então elementos como uma div, por exemplo, aparentam ter apenas alguns px de altura, devido ao seu padding, e o seu conteúdo com float poderá aparenta ter vazado do elemento. A solução para este comportamento estranho é ter um elemento com clear logo após os elementos com float que causaram este efeito.

2

Source: scriptcase / Float CSS

Comments

comments

Leave a Reply

Your email address will not be published.