Se o Internet Explorer não soubesse como funciona a propriedade float do CSS, o advento dos Padrões Web não vingaria tão cedo. A propriedade float é a propriedade responsável por “administrar” a diagramação do site. É com ela que você irá organizar as caixas e deixá-las exatamente onde devem ficar. A propriedade float dá mais consistência ao Layout. Diferentemente da propriedade position, que pode trazer uma série de inflexibilidades, deixando o layout mais engessado.
Neste vídeo, mostramos um pouco como funciona a propriedade float e sua parceira, clear.
Se quiser, você pode ver uma versão em textual aqui.
Este vídeo e muitos outros podem ser encontrados no Campus Online. Visite e cadastre-se grátis para ter acesso a vários vídeos e conteúdos sobre Padrões Web, Javascript, Ajax, Python e outras coisas.
33 Comentários
33 Comentários
Marcio Toledo 13/02/2009 às 12:24
Interessante!
Seria legal um artigo completo falando sobre o uso de Display:Table também. Muita gente não sabe como funciona esse tipo de formatação via CSS, e sem dúvida ela fará parte do nosso futuro como desenvolvedores.
Um livro bom para ler é o “Everything you know about CSS is wrong”.
Pedro Rogério 13/02/2009 às 14:49
“Se o Internet Explorer não soubesse como funciona a propriedade float do CSS, o advento dos Padrões Web não vingaria tão cedo”
Até a versão 6 ele não sabe trabalhar corretamente com float, se você utilizar float e margin para o mesmo lado já sabe o que acontece né? O IE tem que fazer algumas aulas de Tableless no Campus da Visie.
Carlos Eduardo 13/02/2009 às 17:40
Ao mesmo tempo que o float é muito importante, os desenvolvedores iniciantes se confundem DEMAIS com seus fundamentos…
O pior mesmo é termos um navegador tão “burro” que duplica margens que setamos nos elementos com float… Bom, não é o caso ficar explicando quando acontece um bug, mas o sofrimento que passamos a cada site desenvolvido
Narley Fabricio 13/02/2009 às 18:26
Muito bom Diego, tenho visitado sempre aqui e os conteúdos são sempre bons.
Espero que continue com maior frequência.
Abraços!
Mikael Carrara 13/02/2009 às 19:07
@Pedro Rogério
Você tá falando do bug da margem dupla no IE6?
A solução pra isso você já deve conhecer né?
div {
margin-left:20px;
display:inline;
float:left
}
Nauro Rezende Jr 13/02/2009 às 20:14
Muito legal este post sobre clear e float.
A ideia do Marcio sobre uma post sobre display:table é realmente muito boa também, eu com certeza iria aproveitar bastante.
Christian Nascimento 13/02/2009 às 21:41
Deixem o IE6 descansar em paz. Falar nome de morto no dia de sexta-feira 13 da azar! =$
Boa matéria Diego!
Id 14/02/2009 às 00:01
Ah se na época que eu tava começando a aprender CSS tivesse essas vídeo aulas!
Seriam tantas dores de cabeça a menos. =]
Bruno Campagnolo de Paula weblog » Resumo do dia para 2009-02-13 14/02/2009 às 00:52
[...] Propriedade Float do CSS [...]
Marcelo L. 14/02/2009 às 02:57
E como deixar o rodapé lá em baixo, fixo?
Ótimo tutorial!
Raphael Nunes 14/02/2009 às 13:52
Ótimo artigo, sempre utilize o float mas para fazer com que o rodapé, por exemplo, ficasse em baixo dos div com float, eu colocava eles dentro de um div sem float ficando com a propriedade position:relative;
com float
com float
rodape
Agora descobrindo o clear, meus “pobremas” acabaram.
Valeu!
Fred Figo 16/02/2009 às 15:04
Muito legal o artigo, dá uma visão bem clara e eficiente para a utilização do float. Excelente help para quem tinha dificuldade em entender o conceito.
Marcelo, existe uns macetes para deixar o footer sempre no bottom da página. Tem um artigo muito bom no Maujor sobre isso. É bem fácil e eficiente. O link é o http://www.maujor.com/tutorial/rodape-embaixo-da-janela.php
Qualquer dúvida estamos aí.
Abs,
Leonardo 16/02/2009 às 17:12
Ótima solução!
Ainda não tinha visto a utilidade para a função Clear.
Mas é incrivelmente simples e útil.
Ótima dica.
VitorGGA 16/02/2009 às 17:44
Jah conhecia ambos, non sabia que o clear estava tão relacionado assim ao float.
Gostei do virdeu =D
rascunho » Blog Archive » links for 2009-02-20 20/02/2009 às 18:21
[...] Propriedade Float do CSS | Tableless.com.br Vídeo que demonstra a propriedade float do CSS. Essa propriedade é responsável pela administração do posicionamento das caixas do layout. (tags: http://www.tableless.com.br 2009 mes1 dia20 float CSS video) [...]
Bruno Campagnolo de Paula weblog » Resumo do dia para 2009-02-20 21/02/2009 às 02:04
[...] Propriedade Float do CSS | Tableless.com.br [...]
Luciana 28/02/2009 às 16:54
Muito bom, já utilizei depois da video-aula para refazer um layout.
Explicação clara e uma bonita voz.
Bruno 06/03/2009 às 10:29
Concordo com a opção display!!!
Danilo 09/03/2009 às 00:04
Ótimo vídeo!
Era exatamente o que procurava.
linelica 12/03/2009 às 22:38
Vídeo extremamente útil. Não conhecia a função clear e me matava para deixar o rodapé lá em baixo quando usava float.
Agora conhecendo esses dois fica bem mais simples. =)
Obrigada pelo trabalho de vocês!
robson 15/03/2009 às 10:09
Existe o bug dos floats no IE, toda vez que utilizar o float temos que utilizar o display:block ou inline para correção?
Dreamweaver - Material auxiliar para aula de 23.09 « Marcelo Seixas 23/03/2009 às 12:08
[...] Propriedades Clear e Float [...]
gilson 09/04/2009 às 13:56
Ai, esse é f!!!…simplesmente show! será meu ambiente de estudos!
gadarf 20/04/2009 às 22:59
Rapaz, mas realmente muito bom mesmo o video.
Luciana A.S. 14/05/2009 às 22:13
Video aula clara e objetiva…
E de grande utilidade para a prática do tableless.
Agradeço!
Gleyd 22/05/2009 às 10:42
Tow gostando dos videos, boa explicação… Agora tenho uma duvida, Tow aprendendo a Criar Template para Joomla e não sei como colocar a barra da direita no seu lugar, ela fica a direita sempre abaixo do conteudo central. Gostaria de saber como deixa-la na posição correta. Obrigado!
Propriedade Position do CSS « Kadu de Souza 17/08/2009 às 20:25
[...] contrário. O Position não serve para diagramar a estrutura de layouts. Para isso, você utiliza a propriedade float do css. O Position vai servir para fazer coisas mais [...]
Daniel Moraes 13/10/2009 às 23:26
muito boa a video aula…era algo q eu sempre sofria por naum conhecer direito como funcionava…parabéns
Como funciona a propriedade float do CSS | >> designerd.com.br 21/10/2009 às 11:24
[...] assistir uma vídeo aula de como usar essa propriedade, acesse o endreço http://www.tableless.com.br/propriedade-float-do-css Aliás, o site tableless.com.br apresenta várias dicas para quem está começando a entrar para a [...]
joaofelipe 03/11/2009 às 10:44
muito boa a video-aula. muito bem explicada. muito obrigado
Thaís 29/12/2009 às 10:28
Excelente vídeo, porém a dúvida nos floats se dá qdo tenta se utilizar por ex 2sidebars e uma área de postagem por ex, e dai pra cima, vcs poderiam postar um vídeo de como usar float´s nesses casos, pois pelo menos nos casos das pessoas que conheço, sempre é este o caso, se vcs pudessem criar um vídeo de float nessa situação qdo c usa 2sides+conteudo e rodape, 3sides+conteudo e rodape.. obrigado
Lucas Monteiro 01/04/2010 às 11:49
Caraca, eu desenvolvo meus próprios temas a tempos e nunca prestei atenção nisso. Perfeito!
Bruno 21/06/2010 às 13:50
Cara, essa vídeo aula é perfeita.. Consegui entender essa propriedade aqui melhor do que o meu professor me explica na aula. Gostei muito. Existe mais vídeo aula como esta? Não necessariamente com essa propriedade… Qualquer coisa, me mande e-mail.