为什么撑不起来高度。。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Career Builder</title>
<link rel="stylesheet" type="text/css" href="css/index.css">
</head>
<body>

<div class="indextop">
<div class="logo" >
<a href="#"><img src="images/logo.png" /></a>
</div>
<div class="nav">
<a href="#"><ul>HOME</ul></a>
<a href="#"><ul>ABOUT</ul></a>
<a href="#"><ul>GALLERY</ul></a>
<a href="#"><ul>FACULTY</ul></a>
<a href="#"><ul>EVENTS</ul></a>
<a href="#"><ul>CONTACT</ul></a>
</div>
<div class="clear1"></div>>
</div>

<div class="banner">

<img src="images/banner3.jpg">

<div class="shade"></div>

<div class="con">
<input type="text" class="in1" placeholder="your Name">
<input type="text" class="in1" placeholder="your Phone">
<input type="text" class="in1" placeholder="your Email">
<textarea class="txt1" placeholder="write Your Comment Here"></textarea>
<br>
<button class="but1">SEND MESSAGE</button>
</div>
<div class="clear2"></div>
</div>

<div class="about">
<div class="a1">
<dir>ABOUT</dir>
<dir></dir>
<dir>Lorem Ipsum is simply text of the printing and typesetting<br>industy.Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s.</dir>
</div>
</div>

<div class="indexfoot"></div>

</body>
</html>

上面是HTML文件，下面是CSS文件

*{
margin: 0;
padding: 0;
}
/* 顶部 */
.indextop{
background-color: #07cbc9;
width: 100%;
height: 80px;
position: fixed;
top: 0;
z-index: 99;
border: 1px solid red;
}
.indextop .logo{
float: left;
}
.indextop img{
padding-top:15px;
padding-left: 130px;
}
.indextop .nav{
float: right;
padding-right: 130px;
}
.indextop .nav a:link,a:visited{
color: white;
}
.indextop .nav a ul{
font-family: 'Microsoft YaHei UI';
float: left;
height: 50px;
width: 80px;
font-size: 15px;
font-color: white;
padding-top: 30px;
text-align: center;
}
.indextop .nav a ul:hover{
background-color: black;
}
.clear1{
clear: both;
}
/* banner部分 */
.banner{
width: 100%;
border: 1px solid red;
}
/* 背景图 */
.banner img{
width: 100%;
height: 500px;
position: relative;
top:80px;
z-index: 1;
}
/* 遮罩层 */
.banner .shade{
width: 100%;
height: 500px;
background-color: black;
float: left;
position: absolute;
top:80px;
opacity: 0.9;
z-index: 2;
}
/* 背景图上的内容 */
.banner .con{
width: 500px;
height: 300px;
position: absolute;
top:50%;
margin-top: -125px;
left: 50%;
margin-left: -250px;
z-index: 3;
text-align: center;
}
.banner .con .in1{
margin: 5px;
height: 30px;
width: 350px;
background-color: transparent;
padding-left: 10px;
border:1px solid #f2f2f2;
}
.banner .con .txt1{
margin: 5px;
height: 100px;
width: 350px;
background-color: transparent;
padding-left: 10px;
padding-top:5px;
border:1px solid #f2f2f2;
}
.banner .con .in1:hover,.txt1:hover{
border-color: #07cbc9;
}
.banner .con .but1{
height: 35px;
width: 150px;
background-color: transparent;
font-size: 15px;
color: #808080;
}
.banner .con .but1:hover{
border: 0;
background-color: #07cbc9;
}
.clear2{
clear: both;
}

我是测试才给2个块加了红色的边框。通过边框可以看出来，class为banner的块并没有因为清除浮动而变成高度为500px啊（设置浮动的图片的高度为500px）

请问这是为什么？
这要怎么修改呢？

持续学习 2018-12-06

源自：float浮动 2-12 清除浮动的常用方法

收起

2回答

chrismorgen 回答被采纳获得+3积分 2018-12-06 18:21:45

你好同学，高度不是没有被撑起来，而是与indextop部分重叠了。所以导致红色边框差了一个indextop的高度，也就是80px，你可以按下图修改，将banner img的top设置为0px;然后给banner添加一个外边距，也就是将banner向下移动80px，将banner与indextop重合的部分分开就行了。