老师，为啥我不能清除浮动
来源：2-6 主体部分的中间
哈哈哈哈哈哈哈哈哦
2019-03-17 22:02:08
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<!--头部-->
<div class="header">
<!--左边的logo-->
<div class="logo">
<img src="image/logo.png" alt="logo">
</div>
<!--右边的导航-->
<div class="nav">
<ul>
<li><a href="">首页</a></li>
<li><a href="">图片</a></li>
<li><a href="">视频</a></li>
<li><a href="">手记</a></li>
</ul>
</div>
</div>
<!--主体-->
<div class="main">
<div class="top">
<img src="image/1.jpeg" alt="1">
</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/weibo.png">
<!--文字-->
<div class="comm">
MICROBLOG
</div>
</div>
<div class="commen weixin">
<img src="image/weixin.png">
<!--文字-->
<div class="comm">
</div>
</div>
<div class="commen qq">
<img src="image/QQ.png">
<!--文字-->
<div class="comm">
</div>
</div>
<div class="clear"></div>
</div>
<div class="m-middle">
"I want 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="footer">
</div>
</body>
</html>
//下面是css代码
*{
padding:0;
margin:0;
}
.header{
width:100%;
height: 100px;
background-color:#eee;
}
.header 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;
line-height: 100px;
list-style: none;
width:80px;
font-size: 15px;
font-weight: bolder;
color:#7d7d7d;
}
a{
text-decoration:none;
}
.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.3;
}
.main .topLayer-top{
width: 500px;
height: 300px;
position: absolute;
top:400px;
margin-top: -150px;
right: 50%;
margin-right: -250px;
z-index:2;
}
.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;
margin-left: 150px;
}
.main .middle{
width: 1000px;
margin:0 auto;
}
.main .middle .m-top .commen{
float:left;
width: 33%;
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;
}
1回答
-
Steve007
2019-03-18
同学，你好。浮动是清除了的，如图：
当不设置清除浮动的样式时，这个m-top盒子是没有高度的，
祝学习愉快！
0
相似问题