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.

Vamos dividir esse código em arquivos, abaixo descrevo os arquivos:

index.html: Esse arquivo pode ser qualquer arquivo HTML que você queira colocar o banner.

banner.js: Arquivo onde ficarão todos os códigos javascript para mostrar e esconder o popup.

banner.css: Arquivo que contém as classes de estilo. Pode conter outras classes dentro dele ou você pode modificar as classes do popup.

O Arquivo index.html

No arquivo index.html, você precisa chamar os outros dois arquivos, banner.js e banner.css. Para chamar o banner.js, use a seguinte linha:

<script language="JavaScript" src="http://url.para/script/banner.js"></script>

Mude a url no atributo src para a url correta onde está o arquivo banner.js.

Para chamar o arquivo banner.css, use a seguinte linha:

<link href="http://url.para/estilo/banner.css" rel="stylesheet" type="text/css" />

Mude a url no atributo href para a url correta onde está o arquivo banner.css.

Essas linhas normalmente são chamadas dentro do cabeçalho do documento html (entre a tag <head> e </head>).

O Código HTML

No corpo do documento html (entre as tags <body> e </body>), entra o código:

<div id="banner_popup" style="position:absolute; top: 0px; left: 0px; display: none;">
	<table border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td align="right"><strong><a href="javascript: void(0);" onclick="fecha_banner();" class="linksFechar"><img src="http://localhost/blog_exemplo/banner_popup/icone-fechar.gif" border="0"> Fechar</a></strong></td>
		</tr>
		<tr>
			<td>
				<a href="http://www.comocriarsites.com/" target="_blank"><img src="http://localhost/blog_exemplo/banner_popup/Ninfeias.jpg" border="0"></a>
			</td>
		</tr>
	</table>
</div>

A primeira linha é uma tag <div>, tem o atributo id igual a banner_popup – esse id nós vamos utilizar para achar o div no documento pelo Javascript. O outro atributo do div é o style – esse atributo define o estilo do nosso componente, no caso o div. Ele define que o <div> vai ficar em posição absoluta, a 0 (zero) pixels do topo e da esquerda da página, e não vai ser renderizado (mostrado) na página (display: none;).

Para mais referências de folha de estilo (CSS) entre em Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 e Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2. E para mais informações da propriedade de estilo display entre em Propriedade Display do Elemento (CSS).

Esse é o código HTML do banner propriamente dito, lógico que a tabela dentro do div você pode alterar para ficar de acordo com o seu site, mas não esqueça de colocar sempre algum lugar para fechar o banner, mesmo que ele se feche automaticamente após um tempo. Para entender um pouco mais de tabela acesse Como Funciona a Tabela (tag <table>) HTML.

No nosso banner a função que vai fecha-lo é a fecha_banner() que está na primeira linha da tabela, no atributo onclick da tag <a>. O atributo onclick executa o código Javascript dentro dele quando o elemento é clicado com o mouse. Podemos ver ainda na tag <a>, que no atributo href, que seria o link que ele iria seguir caso se clicasse nele, mas ele está com uma função Javascript (javascript: void(0);). O nome javascript no início do atributo href indica que eu vou usar um código Javascript nesse atributo, e a função void(0); diz que quando o link for clicado não seguir para lugar nenhum.

Nesse código temos duas imagens, uma faz parte do fechar do banner e a outra é o banner propriamente dito.

A Chamada Javascript

A última parte no nosso arquivo index.html é a chamda para a função Javascript que irá abrir o banner. Abaixo o código:

<script language="JavaScript">
if(document.getElementById('banner_popup'))
	abre_banner();
</script>

Esse código deve vir logo antes da tag </body>, ou podemos colocar a função abre_banner() no atributo onload do próprio <body>. Esse código só faz verificar se existe um elemento com o identificador banner_popup, e se houver, chama a função para exibir o banner.

O Arquivo index.html Completo

<html>
<head>
	<title>Banner Popup</title>
<link href="banner.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="banner.js"></script>
</head>
<body>

<div id="banner_popup" style="position:absolute; top: 0px; left: 0px; display: none;">
	<table border="0" cellpadding="0" cellspacing="0">
		<tr>
			<td align="right"><strong><a href="javascript: void(0);" onclick="fecha_banner();" class="linksFechar"><img src="http://localhost/blog_exemplo/banner_popup/icone-fechar.gif" border="0"> Fechar</a></strong></td>
		</tr>
		<tr>
			<td>
				<a href="http://www.comocriarsites.com/" target="_blank"><img src="http://localhost/blog_exemplo/banner_popup/Ninfeias.jpg" border="0"></a>
			</td>
		</tr>
	</table>
</div>

<script language="JavaScript">
if(document.getElementById('banner_popup'))
	abre_banner();
</script>

</body>
</html>

O Arquivo banner.js

No arquivo banner.js vamos colocar todas nossas funções Javascript. Abaixo o conteúdo do arquivo:

function fecha_banner()
{
	var banner_obj = document.getElementById('banner_popup');
	banner_obj.style.display = 'none';
}

function fecha_banner_timeout()
{
	setTimeout('fecha_banner()', 10000);
}

function abre_banner()
{
	var banner_obj = document.getElementById('banner_popup');

	banner_obj.style.left = '200px';
	banner_obj.style.top = '100px';

	banner_obj.style.display = '';

	fecha_banner_timeout();
}

A função fecha_banner()

A função fecha_banner() fecha o banner, obviamente. Ela é chamada quando se clica no Fechar do banner ou quando se passa dez segundos, como vamos ver na próxima função. Ela pega o objeto do banner através da função getElementById() e atribui ao estilo display o valor none, que faz o elemento deixar de ser exibido (renderizado).

A função fecha_banner_timeout()

A função fecha_banner_timeout() chama a função fecha_banner() após dez segundos, utilizando a função setTimeout() do Javascript. A função setTimeout() do Javascript é bem legal, mas ela é assunto de um post futuro. Basicamente ela executa uma determinada função dado um determindo tempo, em milisegundos.

A função abre_banner()

A função abre_banner(), como o nome diz, abre o banner, ou melhor explicando, faz ele ser exibido. Ela pega o objeto do banner, depois diz onde o banner vai aparecer definindo os estilos top e left (no nosso caso vai aparecer a 200 pixels da esquerda e a 100 pixels do topo), vai também definir o estilo display para vazio, que diz que vai ser utilizado o display padrão do elemento para renderiza-lo. Por fim, ele chama a função fecha_banner_timeout(), que vai esperar dez segundos para fechar o banner.

O Arquivo banner.css

No arquivo banner.css vamos colocar somente o estilo do link de fechar, ela pode conter outros estilos caso necessite. Abaixo o código:

.linksFechar:link
{
 	text-decoration: none;
	font-size: 14px;
	color: #000000;
}

Nesse arquivo só é definido esse estilo, que o texto não vai ser sublinhado, a fonte vai ter tamanho 14 pixels e a cor vai ser preta.

E juntando tudo isso vamos ter um banner popup sem abrir uma nova janela, utilizando Javascript.

Para ver esse exemplo funcionando, entre em Exemplo de Banner Popup.

Display

O valor da propriedade display pode ser:

inline:

- Esse é o valor padrão para a maioria dos elementos HTML. O elemento é renderizado (exibido) sem quebra de linha no seu início e no seu fim.

block:

- Esse é o valor padrão para alguns elementos HTML como parágrafos (<p>) e divs (<div>). Ele é exibido com uma quebra de linha no seu início e no seu fim.

none:

- O elemento que tem o display com esse valor, não é renderizado.

Há outros possíveis valores para a propriedade display, você pode ver em: CSS display Property.

Para colocar a propriedade display em um elemento devemos colocar como um estilo (CSS), por qualquer método, visto em Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 1 e Entendendo CSS (folhas de estilo): Cascading Style Sheet – Parte 2.

Exemplo

primeira linha <span style="display: inline;">segunda linha</span> terceira linha
<BR>
primeira linha <span style="display: block;">segunda linha</span> terceira linha
<BR>
primeira linha <span style="display: none;">segunda linha</span> terceira linha

Você pode verificar o resultado desse código em Propriedade Display.