我看上节课老师讲的并未清除浮动，我照着完成发现不清楚浮动也可以达到效果，浮动清不清楚没有影响吗
来源：2-2 编程练习
李李明明
2020-04-05 15:46:52
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS布局</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
/*此处写代码*/
.header{
width: 100%;
height: 80px;
background: #CCCCCC;
}
.header .logo{
width: 200px;
height: 80px;
float: left;
padding-left: 40px;
}
.header .nav{
float: right;
}
.header .nav ul li{
list-style-type: none;
width: 80px;
height: 80px;
line-height: 80px;
float: left;
font-family: 微软雅黑;
font-size: 15px;
font-weight: bold;
}
</style>
</head>
<body>
<!-- 此处写代码 -->
<div class="header">
<div class="logo"><img src="http://climg.mukewang.com/595dd5120001736902000080.png"></div>
<div class="nav">
<ul>
<li>前端</li>
<li>后端</li>
<li>移动端</li>
<li>数据库</li>
</ul>
</div>
</div>
<div class="main"></div>
<div class="footer"></div>
</body>
</html>
1回答
-
同学你好，当子元素设置浮动时，会脱离文档流，父容器的高度会塌陷，因此可能会对页面布局产生影响；当父元素高度塌陷对页面布局产生影响时，就需要清除该浮动。
该练习中，由于父容器header设置了固定的高度80px，高度不会塌陷，所以不用清除该浮动的影响。
如果我的回答帮到了你，欢迎采纳！祝学习愉快！
0
相似问题