关于浮动的一个问题

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给撑开了。这个问题的具体原理我是不太懂，只知道是这么回事。网上有很多大神说个这方面的东西，你可以自己找找。