清楚浮动问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin:0;
padding:0;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
.container{
width: 1200px;
margin:0 auto;
}
.header{
width: 1200px;
background-color: #ccc;
overflow:hidden;
}
.header .logo{
width: auto;
float:left;
}
.header .nav{
float:right;
overflow: hidden;
}
.header .nav li{
float:left;
margin-right: 20px;
}
.header .nav li a{
padding: 0 20px;
height: 80px;
line-height: 80px;
display: block;
}
.header .logo img{
margin-top: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">
<a href="#"><img src="./img/image001.png"></a>
</div>
<ul class="nav">
<li><a href="#">免费课程</a></li>
<li><a href="#">职业路径</a></li>
<li><a href="#">实战</a></li>
<li><a href="#">原文</a></li>
<li><a href="#">手记</a></li>
</ul>
</div>
</div>
</body>
</html>既然header 是 nav的父元素，header清楚过浮动的话，nav也清楚浮动是不是有点多余啊？
0
收起
正在回答
2回答
你好同学，header是nav的父元素，header清除浮动可以避免整个logo和nav从header中脱离出来。如果nav中有元素设置浮动，而nav不清除浮动，可能会对其造成影响，所以这里给nav也清楚浮动。在本次练习中，可以不给nav设置浮动。祝：学习愉快~
从网页搭建入门Java Web2018版
- 参与学习 人
- 提交作业 1088 份
- 解答问题 10205 个
如果你有Java语言基础，又想以后从事Java Web开发，那么本路径是你的不二选择！本路径从网页搭建开始入手，通过大量案例来学习Java Web基础。定能助你完成Java Web小白的蜕变！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星