#header里的清除浮動屬性，可不可以移動到.nav里面？

我在DW里實驗了一把，移動之后瀏覽器顯示是一樣的，之后我又給他們上了背景色，結果就不一樣了，清除浮動在#header里面是看不到nav的背景色，而放在nav里就能看到了，所以我就搞不懂，他倆的區別在哪里？而且按理說，li進行了浮動，清除浮動應該是他的父級元素也就是nav，為何要清除父級的父級元素，這在實踐或者工作中也可以嗎？

我是小白，里面如果有說錯的請老師們指點

再請教一下，怎么把代碼也發到問題中

<title>無標題文檔</title>
<style?type="text/css">
*{
	margin:0;
	padding:0;
	font-size:12px;
	color:#333333;
	font-family:Verdana,?Geneva,?sans-serif,"宋體";
	list-style:none;
}

a{
	text-decoration:none;
}
a:hover{
	text-decoration:underline;
	color:#FF0000;
}
p{
	line-height:24px;
}

#wrap{
	width:780px;
	margin:0?auto;
	padding:0?10px?10px;
	border-left:1px?solid?#999999;
	border-right:1px?solid?#999999;
}

#header{
	width:100%;
	overflow:hidden;
}
.logo{
	background:#0099E3;
	width:100%;
	height:80px;
	line-height:80px;
	font-size:30px;
	text-indent:30px;
	font-family:"微軟雅黑";
	color:#FFFFFF;
}
.nav{
	width:100%;
	margin-top:10px;
}
.nav?li{
	margin:0?32px;
	float:left;
}
.nav?li?a{
	color:#7f7f7f;
	font-size:16px;
	display:block;
	padding-bottom:2px;
}
.nav?li?a:hover{
	border-bottom:3px?solid?#cc0000;
	text-decoration:none;
}
.nav?li.current{
	border-bottom:3px?solid?#cc0000;
}
.nav?li.current?a:hover{
	border-bottom:none;
}
</style>
</head>

<body>
<div?id="wrap">
	<div?id="heared">
????	<div?class="logo">
????????	前端開發教程
??????</div>
????????<div?class="nav">
????????	<ul>
????????????	<li?class="current"><a?href="#">CSS</a></li>
????????????????<li><a?href="#">HTML</a></li>
????????????????<li><a?href="#">JavaScript</a></li>
????????????????<li><a?href="#">jQuery</a></li>
????????????????<li><a?href="#">Ajax</a></li>
????????????</ul>
????????</div>
????</div>
????<div?id="mainbody">
????	<div?id="sidebar"></div>
????????<div?id="content"></div>
????</div>
????<div?id="footer"></div>
</body>