Tableless - Desenvolvimento inteligente com Padrões Web

13/02/2009
CSS

Propriedade Float do CSS

Vídeo que demonstra a propriedade float do CSS. Essa propriedade é responsável pela administração do posicionamento das caixas do layout.

Por

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.

Por Diego Eis

Diego Eis criou o Tableless para disseminar os padrões web no Brasil. Como consultor já treinou equipes de empresas como Nokia, Globo.com, Yahoo! e iG. É palestrante e empreendedor.

http://twitter.com/diegoeis/

Veja os outros posts de

  • Marcio Toledo

    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”.

  • http://www.pinceladasdaweb.com.br/blog/ Pedro Rogério

    “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.

  • http://project47.viscountbox.com Carlos Eduardo

    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

    Muito bom Diego, tenho visitado sempre aqui e os conteúdos são sempre bons.

    Espero que continue com maior frequência.

    Abraços!

  • http://www.mikaelcarrara.com/blog Mikael Carrara

    @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
    }

  • http://www.parapensarpropaganda.com.br Nauro Rezende Jr

    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

    Deixem o IE6 descansar em paz. Falar nome de morto no dia de sexta-feira 13 da azar! =$

    Boa matéria Diego!

  • http://id.etc.br Id

    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. =]

  • Pingback: Bruno Campagnolo de Paula weblog » Resumo do dia para 2009-02-13

  • http://duplavista.com.br Marcelo L.

    E como deixar o rodapé lá em baixo, fixo?

    Ótimo tutorial!

  • http://www.capixabao.com Raphael Nunes

    Ó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!

  • http://www.c2cballoon.com Fred Figo

    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,

  • http://www.comunicaweb.com.br Leonardo

    Ótima solução!
    Ainda não tinha visto a utilidade para a função Clear.
    Mas é incrivelmente simples e útil.
    Ótima dica.

  • http://www.vitorgga.com VitorGGA

    Jah conhecia ambos, non sabia que o clear estava tão relacionado assim ao float.
    Gostei do virdeu =D

  • Pingback: rascunho » Blog Archive » links for 2009-02-20

  • Pingback: Bruno Campagnolo de Paula weblog » Resumo do dia para 2009-02-20

  • Luciana

    Muito bom, já utilizei depois da video-aula para refazer um layout.
    Explicação clara e uma bonita voz.

  • http://www.baixar.info Bruno

    Concordo com a opção display!!!

  • Danilo

    Ótimo vídeo!

    Era exatamente o que procurava.

  • http://flickr.com/photos/linelica linelica

    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! :D

  • robson

    Existe o bug dos floats no IE, toda vez que utilizar o float temos que utilizar o display:block ou inline para correção?

  • Pingback: Dreamweaver - Material auxiliar para aula de 23.09 « Marcelo Seixas

  • gilson

    Ai, esse é f!!!…simplesmente show! será meu ambiente de estudos!

  • http://www.blog.clacelestial.com gadarf

    Rapaz, mas realmente muito bom mesmo o video.

  • http://www.luwebarts.com.br Luciana A.S.

    Video aula clara e objetiva…

    E de grande utilidade para a prática do tableless.

    Agradeço!

  • Gleyd

    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!

  • Pingback: Propriedade Position do CSS « Kadu de Souza

  • Daniel Moraes

    muito boa a video aula…era algo q eu sempre sofria por naum conhecer direito como funcionava…parabéns

  • Pingback: Como funciona a propriedade float do CSS | >> designerd.com.br

  • joaofelipe

    muito boa a video-aula. muito bem explicada. muito obrigado

  • Thaís

    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 :)

  • http://zisno.com Lucas Monteiro

    Caraca, eu desenvolvo meus próprios temas a tempos e nunca prestei atenção nisso. Perfeito!

  • Bruno

    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.

  • http://embreve-www.felipeartdesign.com.br Luis Felipe Alves

    Obrigado!! Muito bom o vídeo…

    consegui entender mais sobre float e clear

    Parabens!

  • http://blogecko.blogspot.com Felipe

    Suas vídeo aulas são muito boas, bem explicado. Tava boiando no contexto do clear, usando ele em outros contextos sem float, e agora vi pra que ele serve.

  • Pingback: Propriedade Position do CSS | Tableless - Desenvolvimento com Padrões Web

  • http://www.pabloribeiro.net Pablo Ribeiro

    o IE6 e coisa do passado deixa ele para lá, ja trabalhou bastante hehe