#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>