Valores para o Estilo Float

Os valores para o estilo float podem ser:

none

- Esse é o valor definido para o elemento não “flutuar” para lado algum. Você não precisa colocar esse estilo se você desejar esse valor.

left

- Esse valor faz o elemento “flutuar” a esquerda, deixando qualquer outro elemento a direita desse elemento.

right

- Esse valor faz o elemento “flutuar” a direita, deixando qualquer outro elemento a esquerda desse elemento.

Existem outros valores para o estilo float, mas normalmente são irrelevantes e quase nunca, se não nunca, serão usados, pelo menos eu nunca vi.

O estilo float faz o elemento se sobrepor aos outros elemento da página. Ele também faz o elemento meio que flutuar na página, podendo gerar alguns erros no fluxo dos elementos da página. Nós veremos algumas dicas para corrigir esses erros no final desse post.

Exemplificando o Estilo Float

Agora vou colocar um exemplo do código para o estilo float. Para ver os exemplos abaixo funcionando entre em Exemplo de Estilo Float. Primeiro um exemplo do elemento sem o float.

Sem Float

<div style="width: 200px; min-height: 50px; border: 1px solid black;">
	<div style="width: 50px; height: 50px; background-color: blue;"></div>
	<div style="width: 50px; height: 50px; background-color: red;"></div>
</div>

Esse é o exemplo para você ver como seria exibido os elementos sem o estilo float. Ele desenha um retângulo com dois quadrados dentro, só que esses quadrados estão exibidos um embaixo do outro.

Float Left

<div style="width: 200px; height: 50px; border: 1px solid black;">
	<div style="float: left; width: 50px; height: 50px; background-color: blue;"></div>
	<div style="float: left; width: 50px; height: 50px; background-color: red;"></div>
</div>

Nesse exemplo temos o mesmo retângulo, só que os quadrados internos dele estão com o estilo float: left e vemos que não há quebra de linha entre os elementos e todos estão alinhados a esquerda.

Float Right

<div style="width: 200px; height: 50px; border: 1px solid black;">
	<div style="float: right; width: 50px; height: 50px; background-color: blue;"></div>
	<div style="float: right; width: 50px; height: 50px; background-color: red;"></div>
</div>

Nesse exemplo temos quase a mesma coisa do exemplo passado, só que os elementos internos estão alinhados a direita, porque temos o estilo float: right nos elementos internos.

Float Left-Right

<div style="width: 200px; height: 50px; border: 1px solid black;">
	<div style="float: left; width: 50px; height: 50px; background-color: blue;"></div>
	<div style="float: right; width: 50px; height: 50px; background-color: red;"></div>
</div>

Esse exemplo é para mostrar como podemos colocar na mesma linha dois elementos sem usar tabela, para isso usamos em um elemento o estilo float: left e no outro o estilo float: right.

Dicas para Resolver Problemas com o Estilo Float

Umas das propriedades de elementos que utilizam o estilo float é que ele não ajusta a altura do elemento pai de acordo com a sua altura. Veja esses exemplos funcionando em Exemplo Estilo Float Manha. E vamos ao código:

Float sem Ajuste de Altura

<div style="width: 200px; height: 50px; border: 1px solid black; background-color: yellow;">
	<div style="float: left; width: 50px; height: 50px; background-color: blue;"></div>
	<div style="float: left; width: 50px; height: 75px; background-color: red;"></div>
</div>
<div style="width: 200px; height: 50px; border: 1px solid black; background-color: gray;"></div>

Nesse exemplo temos um elemento pai, que é um retângulo, com dois elementos filhos dentro, mas um dos elementos filhos está com a altura (height) maior que a do elemento pai, e como esse elemento filho está com o estilo float definido, o elemento pai não vai cobrir todo o elemento filho, então o elemento filho vai ficar uma parte fora do elemento pai. Logo embaixo existe outro elemento que deveria ficar após a altura total do elemento mais alto dos elementos anteriores a ele, só que não acontece, e o elemento filho acima, que tem altura maior, fica sobre o elemento que está mais abaixo no esquema.

Float com Ajuste de Altura por Estilo Clear

<div style="width: 200px; min-height: 50px; border: 1px solid black; background-color: yellow;">
	<div style="float: left; width: 50px; height: 50px; background-color: blue;"></div>
	<div style="float: left; width: 50px; height: 75px; background-color: red;"></div>
	<div style="clear: both;"></div>
</div>
<div style="width: 200px; height: 50px; border: 1px solid black; background-color: gray;"></div>

Para corrigir o ajuste de altura, temos algumas técnicas, mas a técnica exemplificada foi a de limpar (clear) o estilo float no final do elemento pai, para ser ajustada a altura dele corretamente. Isso normalmente é feito colocando em uma tag <div> o estilo clear: both. Você pode também criar uma classe com o estilo clear: both e atribuir essa classe a um elemento sempre que você precisar limpar o float.

div.limpar {
	clear: both;
}

<div class="limpar"></div>

Para saber mais sobre o estilo clear acesse Estilo Clear (CSS Style Clear).

Se você colocar o <div> com o estilo clear: both após o fechamento do elemento pai, o próximo elemento vai ficar corretamente posicionado, mas o elemento pai ainda vai ficar com a altura errada.

Float com Ajuste de Altura por Estilo Overflow

Outro ajuste para fixar a altura correta é colocar o estilo overflow: auto no elemento pai. Ele vai se ajustar automaticamente a altura dos elemento filhos. Mas essa técnica não é muito interessante já que se você quiser utilizar o estilo overflow do elemento pai para algum outro propósito não vai poder.

Se você quiser saber mais sobre o estilo overflow acesse Estilo Overflow (CSS Style Overflow).

Float com Ajuste de Altura por Pseudo Elemento After

Existe uma técnica que chama mais atenção por ser teoricamente melhor, porém é um pouco mais complexa, que é a técnica chamada clearfix, que consiste em fazer o clear com o pseudo elemento after, para os navegadores que tem esse pseudo elemento, e para o IE antigo, que não suporta o pseudo elemento after, fazer com que o elemento pai tenha a propriedade hasLayout. Para o elemento ter a propriedade hasLayout basta colocar o estilo zoom: 1 nele.

Vamos ao código:

<style type="text/css">

.clearfix {display: inline-block;} /* isso serve para IE/Mac */

.clearfix:after {
	content: " ";
	display: block;
	height: 0;
	clear: both;
	font-size: 0;
	visibility: hidden;
}

* html .clearfix { zoom: 1; }
.clearfix { display: block; }

</style>

<div style="width: 200px; min-height: 50px; border: 1px solid black; background-color: yellow;" class="clearfix">
	<div style="float: left; width: 50px; height: 50px; background-color: blue;"></div>
	<div style="float: left; width: 50px; height: 75px; background-color: red;"></div>
</div>
<div style="width: 200px; height: 50px; border: 1px solid black; background-color: gray;"></div>

Como pode ver no código acima, a técnica consiste em aplicar uma classe que tenha o pseudo elemento after, no elemento pai dos elementos que irão “flutuar” na página. O pseudo elemento after coloca um espaço logo após o elemento pai, mas coloca ele invisível e com a propriedade clear: both. Os elementos de cima da folha de estilos servem para ajeitar esse bug no IE/Mac e os de baixo servem para antigas versões do IE.

Para saber mais sobre o pseudo elemento after entre em CSS Pseudo Elementos: First-Letter, First-Line, Before e After.

Outras Técnicas

Uma outra técnica menos abordada é dar ao elemento pai o estilo display: table, mas acho que essa técnica não é muito boa, porque utiliza um estilo que nós podemos querer utilizar para outros fins. Essa técnica é abordada no site CSS: Truques para dominar a propriedade Float, mas sem muitas explicações de por que essa técnica funciona.

Para saber mais sobre as outras técnicas de posicionamento, leia CSS float: considerações, dicas e macetes para bons layouts na web e How To Clear Floats Without Structural Markup.

E para corrigir algum bug do IE com relação a margem colocada na mesma direção qual o elemento flutue, veja Bug Fix: IE Double Margin Float Bug.

Para criação e hospedagem profissional de websites e sistemas, acesse Panasoft.

Visible

- Esse é o valor padrão, o elemento não faz nada e o conteúdo que ultrapassar o elemento sera escrito fora dele.

Hidden

- Todo conteúdo que ultrapassar o elemento com esse valor no estilo overflow ficará escondido, e o elemento não terá barra de rolagem para visualização do resto do conteúdo.

Scroll

- Com esse valor o elemento sempre vai ter barra de rolagem, não importa se tenha ou não conteúdo passando de seus limites. Se você quer que o elemento tenha barra de rolagem, você normalmente não usa overflow: scroll e sim overflow: auto.

Auto

- O elemento exibirá barra de rolagem somente se o seu conteúdo ultrapassar seus limites.

Overflow x/y

Ainda podemos especificar mais quais limites queremos que o overflow atue, utilizando overflow-x, para o overflow valer somente para a barra e o limite horizontal, e overflow-y, para o overflow valer somente para a barra e o limite vertical.

Exemplos de Overflow

Vamos exemplificar alguns casos de overflow para o melhor entendimento.

Elemento sem Overflow

O código do exemplo acima é:

<div style="border: 1px solid black; width: 100px; height: 50px;">Aqui vamos escrever até ver o funcionamento do overflow</div>

Você pode verificar que o tamanho do elemento <div> não mudou, a sua borda mostra isso, mas o texto ultrapassou o limite vertical do elemento. Esse é o comportamento overflow padrão, que é como se colocasse o estilo overflow: visible.

Elemento com Overflow Hidden

O código do exemplo acima é:

<div style="border: 1px solid black; overflow: hidden; width: 100px; height: 50px;">Aqui vamos escrever até ver o funcionamento do overflow</div>

O tamanho do elemento <div> também não mudou, mas o texto dentro dele não ultrapassou a borda do elemento, e todo o conteúdo do elemento que ultrapassou o limite vertical dele ficou escondido.

Elemento com Overflow Scroll

O código do exemplo acima é:

<div style="border: 1px solid black; overflow: scroll; width: 130px; height: 75px;">Aqui vamos escrever até ver o funcionamento do overflow</div>

O elemento <div> ficou com barras de rolagem vertical e horizontal, mesmo sem a necessidade da barra horizontal.

Elemento com Overflow Auto

O código do exemplo acima é:

<div style="border: 1px solid black; overflow: auto; width: 130px; height: 75px;">Aqui vamos escrever até ver o funcionamento do overflow Aqui vamos escrever até ver o funcionamento do overflow</div>

O elemento <div> ficou somente com barra de rolagem vertical e horizontal como não precisou da barra de rolagem horizontal ele não exibe.

O site é: Serviço de Validação de CSS do W3C.

Entre no site e teste, ele mostra alguns relatórios que podem ajudar a melhorar a sua folha de estilos (CSS).

O Básico

Para definir uma regra CSS você deve colocar-lo de alguma forma no documento. Veremos três formas de colocar um estilo em um documento abaixo:

Colocando o atributo style na tag desejada

Esse método é o mais simples e serve se você vai fazer uma coisa simples, pois colocando desse jeito em algo grande e complexo, fica difícil de dar manutenção ao que for fazer. Um exemplo:

<div style="color: #aaaaaa; background-color: #0000ff;">exemplo de estilo com a atributo style</div>

Isso simplesmente diz que essa tag <div> vai ser exibida com a cor da fonte do texto que estiver dentro dela em cinza (#aaaaaa) e com a cor de fundo em azul (#0000ff).

Utilizando a TAG <style>

Diferente de usar um atributo, você pode usar a tag style e dentro dela definir vários estilos. Exemplo:

<style type="text/css">
div {
	color: #aaaaaa;
	background-color: #0000ff;
}
</style>

<div>exemplo de estilo usando a tag style</div>

Essa tag <style> normalmente é definida no cabeçalho do documento HTML (entre as tags <head> e </head>).

Esse estilo é definido igual ao do exemplo anterior, cor do texto em cinza e cor do fundo em azul, mas nesse caso, eu estou definindo para TODAS as tags <div>. Isso pode ser feito para qualquer tag do documento, definindo assim estilos para todas as tag daquele tipo naquele documento.

Esse modo é mais utilizado que o primeiro em sites grandes, para atualizar o site fica mais fácil, pois só preciso atualizar o CSS no início do arquivo. O problema se meu site tiver muito arquivos, preciso atualizar todos os arquivo, mas para evitar isso, temos a terceira opção para colocar CSS no seu site.

Utilizando CSS em um arquivo separado

Podemos também utilizar o CSS em um arquivo separado, normalmente com a extensão .css. Nesse arquivo não precisamos colocar nenhuma tag, é só começar a definir os estilos. Exemplo:

Arquivo estilo.css:

div {
	color: #aaaaaa;
	background-color: #0000ff;
}

A tag eu tenho que colocar é a <link>, para adicionar no meu documento o arquivo de estilos. Essa tag sempre deve ficar no cabeçalho do arquivo (entre as tags <head> e </head>).

Documento HTML:

<html>
<head>
	<link rel="stylesheet" type="text/css" href="estilo.css">
</head>
<body>
	<div>exemplo de estilo usando uma arquivo separado</div>
</body>
</html

A tag <link> serve praticamente para poder usar um arquivo de estilos separado, na teoria essa tag serve para outras coisas também, se você quiser saber mais sobre ela entre em: http://www.w3schools.com/TAGS/tag_link.asp. O atributo rel define a relação do arquivo chamado com o documento, no caso stylesheet, que é o nosso arquivo de folha de estilos. O atributo type indica o tipo MIME do arquivo. Se quiser saber o que é MIME acesse: http://pt.wikipedia.org/wiki/MIME. E por último e mais importante, o atributo href diz onde está o seu arquivo de estilo, isto é, a URL para o arquivo.

Esse método é muito bom, pois podemos chamar um único arquivo de folha de estilo por vários documentos, então dar manutenção fica muito fácil.

Agora que já sabemos como colocar CSS no nosso documento, podemos ver a segunda parte, que mostra como agrupar os estilos por classe e por identificador. Entre no link Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2.

Atribuindo Estilo a Todas as Tags de um Tipo

Para atribuir um estilo a todas as tags de um tipo, você deve utilizar a sintaxe padrão do CSS. Exemplo:

body {
	background-color: #00ff00;
}
div {
	font-family: tahoma, verdana, arial;
}

No exemplo acima eu estou dizendo que a tag <body> do documento vai ficar com o fundo de cor verde (#00ff00) e todas as tags <div> do documento vão ficar com a fonte tahoma, verdana ou arial.

Eu posso fazer isso para qualquer tipo de tag, mas isso me deixa pouca flexibilidade para certo casos, em que eu queira um <div> com outra fonte, ou outra tag com outra especificação do que foi passado no estilo para ela, para isso podemos definir classes de estilo para as tags.

Definindo classes de estilo (CSS) para tags

Para definir uma classe de estilo para uma tag, deve-se colocar o nome da tag, seguindo de um ponto (.) e seguindo do nome da classe. Esse nome da classe pode ser qualquer nome. Exemplo:

div.item {
	background-color: #00ff00;
	padding-top: 10px;
}
div.lateral {
	background-color: #ff0000;
	padding-left: 5px;
	padding-right: 5px;
	float: right;
}

Quando uma classe de estilo é definida para uma tag HTML, voce deve utilizar o atributo class da tag para dizer que aquela tag deve ser exibida com o estilo referente a aquela classe. Exemplo:

<div class="item">Meu fundo é verde</div>
<div class="lateral">meu fundo é vermelho</div>

Cada uma das tags <div> acima terá um estilo diferente, segundo as classes especificadas mais acima.

Esse método é bom porque nós podemos saber em quais tags podem ficar os estilos definidos e esse método é muito usado quando se faz um código com o conceito tableless (sem tabelas), o que normalmente utiliza muito a tag <div>.

Generalizando as Classes de Estilo (CSS) para Qualquer tag

Mais uma característica do CSS é que eu posso definir uma classe para qualquer tag. Para isso nós colocamos somente o ponto seguido do nome da classe. Exemplo:

.menuItem {
	width: 320px;
	height: 240px;
}
.caixaEsquerda {
	width: 100px;
	float: left;
	padding-top: 20px;
}

Isso faz com que qualquer elemento com o atributo class definido com o nome da classe acima (menuItem ou caixaEsquerda) ficará com o estilo que ele apresenta. Exemplo:

<table class="caixaEsquerda">
	<tr>
		<td>Essa tabela vai ficar na esquerda, com largura 100 pixels e 20 pixels afastada do elemento acima dela</td>
	</tr>
</table>

<div class="menuItem">Esse div tem largura de 320 pixels e altura de 240 pixels</div>

Esse tipo de classe é boa para qualquer tipo de site, pois você define como vão ser as partes do seu site sem antes saber qual a tag que ficará com cada parte. Mas isso faz com que você não tenha muito controle ao o que se aplica onde, diferente do método acima deste.

Colocando Estilo via Identificador Único

Outra forma de colocar estilo é utilizando um identificador único para um único elemento. A sintaxe no CSS é colocar um jogo-da-velha (#) seguido pelo identificador único do elemento. Exemplo:

#miolo {
	float: left;
	width: 400px;
	padding-left: 20px;
	padding-top: 20px;
}

#topo {
	width: 100%;
	height: 80px;
	background-image: url("img/bgimagemtopo.png");
}

Para fazer um elemento receber o estilo definido por um identificador único, devemos atribuir a esse elemento um atributo id. O identificador desse elemento deve ser único, não podendo se repetir em outro elemento. Exemplo:

<div id="topo">Esse é o topo do site, recebe o estilo de topo, com uma imagem de fundo</div>
<div id="miolo">Esse é o miolo do site, recebe o estilo de miolo</div>

Isso faz com que o elemento receba o estilo definido pelo seu identificador. Esse método é útil quando quero definir padrões para sites, tipo o que é topo, laterais (esquerda e direita), menu (pode ser horizontal ou vertical) e rodapé. Pode ser usada em outras coisas também, nunca se limite.

Agora que você já sabe como colocar estilos de todas as formas no seu site, vou mostrar o que é uma pseudoclasse.

Pseudoclasses

Pseudoclasses são classes de estilo que definem certos aspectos de um elemento HTML. A pseudoclasse que eu vou mostrar é a da tag <a>, que faz um link de uma página para outra. Vou mostrar o código e depois explicar o funcionamento. Para ver outras pseudoclasses, entre em: http://www.w3schools.com/CSS/css_pseudo_classes.asp ou  http://www.maujor.com/tutorial/pseetut.php.

a:link { text-decoration: none; color: 0000ff; font-weight: bold; }
a:visited { text-decoration: none; color: 00ffff; font-weight: bold; }
a:hover { text-decoration: underline; color: 00ff00; font-weight: bold; }
a:active { text-decoration: none; color: ff0000; font-weight: bold; }

As pseudosclasses da tag <a> são:

link:

- Estilo que define como o link vai ficar normalmente, quando não foi clicado e quando o mouse não está sobre ele, nesse caso, vai ficar sem sublinhado, com a cor azul e em negrito.

visited:

- Estilo que define como o link vai ficar quando ele já foi clicado ou visitado e quando o mouse não está sobre ele, nesse caso, vai ficar sem sublinhado, na cor azul claro e em negrito.

hover:

- Estilo que define como o link vai ficar quando o mouse estiver sobre ele, que nesse caso, vai ficar sublinhado, na cor verde e em negrito.

active:

- Estilo que define como o link vai ficar quando o link estiver aberto (ativo), nesse caso, vai ficar sem sublinhado, na cor vermelha e em negrito.

As pseudoclasses da tag <a> devem aparece na ordem mostrada no exemplo, se ficarem em outra ordem podem não funcionar. Um link no site sem estilo nenhuma aparece sublinhado, e o estilo text-decoration serve para dizer como deve aparecer esse sublinhado, no nosso caso está com o valor none, quer dizer que vai aparecer sem sublinhado, mas ele pode ser underline, overline, line-through ou blink.

Esses estilos definidos desse jeito afetarão todas as tags <a> do documento, então você pode definir classes e pseudoclasses assim:

a.item:link { text-decoration: none; color: 0000ff; font-weight: bold; }
a.item:visited { text-decoration: none; color: 00ffff; font-weight: bold; }
a.item:hover { text-decoration: underline; color: 00ff00; font-weight: bold; }
a.item:active { text-decoration: none; color: ff0000; font-weight: bold; }

Desse modo só vai afetar as tags <a> que tiverem o atributo class com o valor da classe de estilo, no caso do exemplo, o valor item.

Se gostou, achou algum erro ou tem alguma dúvida, comente.