CSS - Bu kod ne işe yarıyor?

Merhaba arkadaşlar Tayfun abinin bir videosunu izliyordum. Tayfun navigasyon bar yapıyordu. Kodları aynen bilgisayarıma geçirdim ve parça parça kodların ne işe yaradığına bakıyorum.

/*
	Sıfırlama
*/
* {
    padding: 0; margin: 0; list-style: none; border: 0; text-decoration: none; font-family: Arial; font-size: 14px; line-height: 21px
}

.navigasyon {
    overflow: hidden;
    background-color: #111;
}
.navigasyon ul li {
    float: left;
}
.navigasyon ul li a {
    display: block;
    padding: 10px 20px;
    color: #fff;
    border-right: 1px solid #555;
}
.navigasyon ul li a:hover {
    background-color: #555;
}

Bu kodlar içinde sildiğimde sıkıntı yaratan 2 kod var çözemediğim. Bunlardan biri
overflow: hidden;
ne işe yarar? Onu kaldırınca navigasyon böyle oluyor:

Varken:

Silince:


Yardımlarınız için teşekkür ederim.

overflow: hidden; (taşan yerleri kapatır)
örneğini detaylı olarak http://www.w3schools.com/cssref/play...&preval=hidden burdan görebilirsin .

cevap için teşekkürler ama ne olduğunu zaten biliyorum. Burada niye böyle bir etki yarattı onu bilmiyorum

içerisinde float:left olan kapsayıcılar genelde saçmalar ve bunları düzeltmenin bir kaç yolu vardır. overflow:hidden da bunlardan biridir. Aynı şekilde .navigasyon ul {overflow:auto} derseniz de düzelir. Bir de google'a clearfix yazıp bakmanızda fayda var.

aradığım cevap sağolun hocam. Anladığım kadarıyla float dersem overflow yapmam gerek?

Float derseniz yeni satıra temizcce geçmek için saydgım yöntemlerden birini kullanmanız gerekir