猿问

关于浮动的一个问题

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

求解 谢谢

Beckybei
浏览 1261回答 1
1回答

西地锦

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