O problema é que vc está usando float:left
nos elementos filhos do container
. Quando vc coloca float
nos Filhos o Pai perde a referencia dos valores do box-model
desses elementos, pois agora eles estão "flutuando" no dom.
O uso da propriedade overflow
com valor diferente de visible
(seu valor padrão), criará um novo contexto de formatação de bloco. Isto é tecnicamente necessário para evitar que um conteúdo flutuante que entre em contato com o objeto dentro da área de rolamento e quebre as linhas do conteúdo
Fonte: https://developer.mozilla.org/pt-BR/docs/Web/CSS/overflow
Leia também sobre o que é Block formatting context
Uma das técnicas para resolver isso é colocando overflow:auto
no container
Pai, assim, mesmo o Filho tendo float
ele não vai "fugir" ao escopo do Pai. Outra técnica para corrigir isso é usando o famigerado Clearfix
Aqui o Pai é o Box com borda vermelha, e os Filhos são os Box Azul com float

Float serve para vc "flutuar" elementos um ao lado do outro. A div
é um elemento do tipo bloco e funciona como um box model, ou seja ela ocupa 100% da largura da tela e aceita valores de margin
, padding
e border
. Logo, pela div
ocupar 100% da largura da tela ela não deixa que outras divs
ficarem ao seu lado, para "corrigir" isso usava-se o float
Porém, usar float
tem uma série de problemas, o float
faz com que um elemento pai perca a referência do box model do filho que tem float
, para prevenir esse comportamente usa-se a técnica do overflow
ou do clearfix
Técnica do ClearFix
ul {
list-style: none;
margin: 0px;
padding: 0px;
/* overflow: hidden; */
background-color: #333333;
}
li {
float: left;
}
/* clearfix */
ul::after,
ul::before {
content: ' ';
display: table
}
ul::after {
clear: both
}
<h2>Navigation Manu</h2>
<p>In this example, we use CSS to style the list horizontally, to create a navigation menu:</p>
<ul>
<li>Home</li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
Leitura recomendada: Float vs. inline-block. Quais as vantagens e desvantagens de cada um?