关于浮动的一个问题

Question

#header{width:100%; overflow:hidden;}
.logo{width:100%; height:80px; line-height:80px; font-size:30px; font-family:"微软雅黑"; background:#3399cc; color:#fff; text-indent:30px;}
.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;}

<div id="header">
<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>

请问这里的ul没有overflow高度为0 nav没有overflow 高度也为0 

为什么这里header的高度却为113？ 

header的高度是不是应该等于logo+nav？ 那么nav为0 高度为什么不是80呢？

求解 谢谢

Answer 1

li设置了浮动，脱离了标准的文档流，父元素ul就不能被li给撑开了。这个问题的具体原理我是不太懂，只知道是这么回事。网上有很多大神说个这方面的东西，你可以自己找找。