Home Me envie um e-mail! Feed
Blog do yogodoshi

Dica de CSS: Float – Quando div pai não acompanha o tamanho das divs filhas

Estava lendo um post sobre float no blog Desenvolvimento para Web e me deparei com uma ótima dica para ajeitar aquele problema onde a div pai não acompanha o tamanho das divs filhas.

Arrumar o float para ajustar a altura do elemento pai

Elementos que contêm elementos float não calculam sua altura como é de se esperar. De fato, se o elemento pai contém apenas elementos flutuadores, navegadores vão renderizar a altura em zero (como se fosse “height:0“).

Elemento pai com tilte

É um erro que todo mundo já deve ter visto acontecer mas eu nunca soube o que gerava esse problema.

Para consertar basta dar um “clear” antes de fechar a tag pai; algo como: <br clear=”all” /> ou via CSS com o clear:both, por exemplo.

feed Gostou do Blog?  Assine o RSS Feed ou receba em seu e-mail

Posts Relacionados:
- Não existem posts relacionados

Carlos diz,

July 15, 2008 @ 11:39 am

Nossa, eu quando comecei em CSS ( a uns 2 anos atrás) tive o mesmo problema! O que eu fiz? antes de fechar a div pai.

Na época não encontrava ninguém pra me ajudar nisso, descobri sozinho… Muito bom você divulgar esse informação, vai ser muuuuuuito útil.

Carlos diz,

July 15, 2008 @ 11:39 am

hunm… não tá aceitando os códigos html… T_T

yogodoshi diz,

July 15, 2008 @ 11:53 am

@Carlos
é, aqui nos comentários fica difícil… =/
Se quiser pode me enviar por e-mail que eu coloco no post. (se não forem 25252 linhas de código né =p)

Abraços!

Yuri k diz,

July 15, 2008 @ 8:34 pm

Amigo .. Post muito bom, tava precisando. Mais houve um problema e não consigo resolver, bom no IE 7 ta funcionando perfeitamente mais no Firefox não funciona tem como você me ajudar? Desde já agradeça atenção.
Atenciosamente
Yuri Karsten

yogodoshi diz,

July 15, 2008 @ 9:25 pm

@Yuri
Só vendo o seu código… mas aqui nos comentários você não conseguirá postar ele; sugiro então postar em um forum como o Webly: http://forum.ievolutionweb.com/ onde com certeza irão solucionar o seu problema rapidamente. ^^

Abraços!

Carlos diz,

July 15, 2008 @ 10:29 pm

yogodoshi,

Por que você não instala o plugin que permite o usuário postar códigos?

Yuri k diz,

July 16, 2008 @ 9:59 am

Uma pena .. pensei que poderia post aqui, mais irei posta-lá sem problemas.
Obrigado

Tárcio Zemel diz,

July 16, 2008 @ 10:12 am

Obrigado pela referência, yogodoshi! Esse problema é uma pedra no sapato de muitas pessoas, realmente! Agora que sabemos como resolvê-lo, pouparemos horas de desenvolvimento… rsrs

Abraços!

Tiago Celestino diz,

July 18, 2008 @ 12:45 am

Outra solução é colocar o float:left na div pai.

Christian diz,

July 21, 2008 @ 4:04 pm

Tem uma outra forma: adiciona no seu CSS o seguinte código:

/*classe para limpar containers com filhos flutuantes*/
.clearfix:after {
content:”.”;
display:block;
height:0;
clear:both;
visibility: hidden;
}
/*.clearfix {display: inline-table;}*/
*.clearfix {display:inline-block;}

/* Hides from IE-mac \*/
*html .clearfix {height: 1px;}
.clearfix {display: block;}
/* End hide from IE-mac */

E na div pai, adicione a classe clearfix
Algo como

Tem o mesmo efeito. Utilizo há anos isso! hehe

Dirceu diz,

July 30, 2008 @ 10:10 pm

Amigo como faço para alinhar no centro, uma imagem com essa função “float”?

Obrigado!

yogodoshi diz,

July 31, 2008 @ 3:30 pm

@Dirceu acho que você está confundindo um pouco a função do float, sugiro dar uma lida nesse “artigo” que tem tudo sobre float: http://css.maxdesign.com.au/floatutorial/ .

Abraços!

Jonas diz,

August 17, 2008 @ 8:28 pm

Muito boa sua dica.
Encontrei seu blog por acaso no google e virei fã.
Valeu.

gadarf diz,

May 3, 2009 @ 2:29 pm

Em alguns casos não funciona.

yogodoshi diz,

May 3, 2009 @ 3:15 pm

Cara, essa é a solução pra esse problema, se não está funcionando, provavelmente é porque tem, além deste, outro bug no meio.

Abraços!

Wicttor diz,

October 28, 2009 @ 12:05 pm

Muito bom, obrigado pela contribuição.

Passei uma manhã inteira me batendo pois não conseguia resolver esse problema, agora que já tenho a linha de código vai ajudar muito.

Parabéns!

yuri vinicius silva diz,

November 18, 2009 @ 1:35 pm

Muito bom, me ajudou e muito, obrigado

Leandro T. Morais diz,

March 9, 2010 @ 8:30 am

Muito boa dica, tava cansado de apanhar deste probleminha. Valeu mesmo meu amigo.

Flávio diz,

April 8, 2010 @ 12:10 pm

Cara, mto bom. Consegui solucionar o problema, mas nao da maneira mais bonita, hehe. Se eu simplesmente adicionar o ‘clear:both;’ no id do pai, ele nao funciona. Agora, se eu colocar um e inserir uma classe com o ‘clear’ ou mesmo colocar um style dentro dela, ai funciona. É nessas horas q eu fico com uma grande cara de “WTF?”, hehe.

obs.: Se eu inserir o ‘clearfix’ que o Christian citou aqui nos comentários tbm funciona.

Abraços.

Flávio diz,

April 8, 2010 @ 12:52 pm

Eu de novo.

Só pra constar, tbm rola resolver isso definindo o overflow como hidden.

http://www.criarweb.com/artigos/solucao-problema-float-construcao-css.html

abs

Fabio diz,

February 2, 2011 @ 9:08 pm

Valeu pela dica.

Eduardo diz,

October 27, 2011 @ 10:05 am

Cara eu to lutando ja tem uma semana e só encontrava tonteras e redundancias a respeito. Depois que passei pelo seu POST minha vida mudou. UHauha valeu mestre dos

Pedro diz,

November 22, 2011 @ 11:27 pm

Muito bom cara! Realmente tirou uma grande dúvida! Parabéns!

Assinar feed RSS de comentários neste post · TrackBack URI

Deixe seu comentário

Fechar
Envie por e-mail