Blog do Cazelli

Depois de ter novamente o problema das divs vazando no Firefox, quando eu coloco o elementos filhos como float, resolvi fazer este post para não ter que procurar na Internet a solução novamente e ajudar você que provavelmente estava procurando. Espero que ajude. Se você não entendeu o problema veja o código abaixo e seu resultado quando executado no Firefox:

	#pai{
		background-color: #00FF00;
		padding:5px;
	}
	#filho{
		float:left;
		width:50px;
		height:50px;
		background-color: #0000FF;
	}
	<div id="pai">pai
		<div id="filho">filho</div>
	</div>

Resultado:

Percebam que a div filho fica “vazando” ou se preferir saindo, além do limite da div pai. Para resolver isto tem muitos modos, se eu encontrar um melhor eu complemento este post futuramente. Enfim, um das maneiras que eu achei foi colocar um ‘br’ como último elemento da div pai e adicionar a propriedade css para ele ‘clear: both’. Veja código alterado abaixo:

	#pai{
		background-color: #00FF00;
		padding:5px;
	}
	#filho{
		float:left;
		width:50px;
		height:50px;
		background-color: #0000FF;
	}

	#pai br{
		clear:both;
	}
	<div id="pai">pai
		<div id="filho">filho</div>
	<br>
	</div>

E o resultado:

Por hoje é só isso mas aguardem mais dicas em breve.