pular para conteúdo pular para busca no site

Gustavo Ribeiro (blog)

jul 28

ClearFix? Nunca mais!

1 star2 stars3 stars4 stars5 stars
Meta Tags: • por Gustavo Ribeiro

A quase dois meses atrás, postei um tópico, chamado Corrigindo a propriedade float via CSS, explicando o porque de sempre que utilizarmos um objeto com a propriedade float ele perder a herança do elemento pai e como corrigir esse bug.

Foi descoberto Atualmente descobri que podemos ter a mesma solução sem ter que incluir aquelas linhas todas do .clearfix. A solução é que, devemos sempre lembrar que o elemento pai possui sua propriedade overflow como auto.

<div>
    <ul>
        <li>item 1</li>
        <li>item 2</li>
    </ul>
</div>
div { overflow: auto }
ul li { float: left }

Fontes:
http://br.groups.yahoo.com/group/webstandards-br/message/20126
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

Compartilhe este post:
  • E-mail this story to a friend!
  • Google Bookmarks
  • del.icio.us
  • Twitter
  • Technorati
  • Digg
  • Reddit
  • Netvibes
  • LinkedIn
  • Facebook
  • MySpace
  • StumbleUpon
  • Rec6
  • Mixx
  • FriendFeed
  • Identi.ca
  • Tumblr
  • HelloTxt
  • Live
  • Yahoo! Buzz
  • Yahoo! Bookmarks
  • Yigg
  • Faves

Leia também

· · · · ·

3 comentários

  1. Spark — julho 29, 2008 @ 12:19

    Botar a referência de onde viu, aprendeu, pode facilitar as coisas para quem está lendo, e só viu metade da história ;)
    Ou você descobriu isso?

  2. Gustavo Ribeiro — julho 29, 2008 @ 14:51

    Fala Spark, blz?
    Então, nem você disse na lista de webstandards se foi você quem descobriu ou se viu em algum site. Eu fiquei sabendo pela sua mensagem mas, como é lista, não coloco referência, agora se tiver em algum blog seu é só falar que faço o trackback e coloco os créditos para ti ou então informe aonde viu também.

  3. Cleo Morgause — julho 30, 2008 @ 16:00

    é… gostei mais desse!!! ^^

Feed RSS dos comentários deste post URL de TrackBack

Seja o(a) primeiro(a) a comentar.

XHTML: Você pode usar estas tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Twitter

    Categorias

    • W3Counter
    • Atualize seu Navegador
    • FeedBurner
    • DiHitt
    • BlogBlogs
    • Click to see how many people are online