老师，为什么没有达到清除浮动的效果
来源：2-7 编程练习
慕设计6552984
2020-02-22 16:51:59
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>小案例</title>
<style>
*{
margin:0;
padding:0;
}
.header{
width:100%;
height:100px;
}
.header .logo img{
width:300px;
height:85px;
padding-left:100px;
padding-top:8px;
}
.header .logo{
float:left;
}
.header .nav{
float:right;
}
.header .nav ul{
padding-right:100px;
}
.header .nav ul li{
float:left;
list-style:none;
width:80px;
height:100px;
line-height:100px;
font-size:15px;
font-weight:bolder;
color:#7D7D7D;
}
.main .top{
width:100%;
height:600px;
}
.main .top img{
width:100%;
height:600px;
}
/*
.main .topLayer{
position:absolute;
top:100px;
left:0;
background-color:#000;
width:100%;
height:600px;
opacity:0.5;
}*/
.main .topLayer-top{
width:500px;
height:300px;
background-color:blue;
position:absolute;
top:400px;
margin-top:-150px;
z-index:2;
right:50%;
margin-right:-250px;
}
.main .topLayer-top .word{
padding-top:100px;
color:#fff;
font-size:45px;
font-weight:bolder;
text-align:center;
font-family:"微软雅黑";
}
.main .topLayer-top button{
width:200px;
height:60px;
margin-top:50px;
color:#fff;
background-color:#F5704F;
font-family:"微软雅黑";
text-align:center;
font-weight:bolder;
font-size:14px;
border-radius:8px;
clear:both;
margin-left:150px;
}
.main .middle{
width:1000px;
margin:0 auto;
}
.main .middle .m-top .commen{
width:33.3%;
float:left;
padding-top:50px;
text-align:center;
}
.main .middle .m-top .commen img{
width:100px;
height:100px;
}
.main .middle .m-top .commen .comm{
font-size:20px;
color:#7D7C7F;
font-weight:bold;
padding-top:20px;
}
.main ,middle .m-middle{
font-size:22px;
color:#E19796;
font-weight:bold;
padding-top:50px;
font-style:italic;
text-align:center;
padding-bottom:50px;
}
.clear{
clear:both;
}
</style>
</head>
<body>
<!--头部-->
<div class="header">
<div class="logo"><img src="http://climg.mukewang.com/595dd5120001736902000080.png" alt="logo"></image></div>
<div class="nav">
<ul>
<li>首页</li>
<li>图片</li>
<li>视频</li>
<li>手记</li>
</ul>
</div>
</div>
<!--主体-->
<div class="main">
<div class="top">
<img src="http://climg.mukewang.com/58f829090001a4b504260240.jpg" alt="top">
</div>
<!--遮罩层-->
<!--<div class="topLayer"></div>-->
<div class="topLayer-top">
<div class="word">
MY BEAUTIFUL LIFE
</div>
<button>LOOK MORE ></button>
</div>
<!--中间部分-->
<div class="middle">
<div class="m-top">
<div class="commen weibo">
<img src="image/201710121655189399977.png" alt="weibo">
<div class="comm">weibo</div>
</div>
<div class="commen weixin">
<img src="image/201710121655189399977.png" alt="weixin">
<div class="comm">weixin</div>
</div>
<div class="commen qq">
<img src="image/201710121655189399977.png" alt="qq">
<div class="comm">qq</div>
</div>
<div class="clear"></div>
</div>
<div class="m-middle">
"I will to give good things to record down,<br>after the recall will be very beautiful"
</div>
<div class="m-bottom">
</div>
</div>
<!--中间底部部分-->
<div class="bottom"></div>
</div>
<!--尾部-->
<div class="fotter"></div>
</body>
</html>
1回答
-
同学你好，效果达到了，top已经有了高度：
如果没有清除浮动的话，top的高度就会为0.
如果我的回答帮助了你，欢迎采纳，祝学习愉快~
0
相似问题