大作业不管怎么样都有浮动，怎么解决，clear,overflow,float三种方法都试了，还是不行

<body>

   <div class="header">
   
       <div class="logo">
           <img src="images/logo.png" >
       </div>
       
       <div class="nav">
           <ul>
               <li>HOME</li>
               <li>ABOUT</li>
               <li>GALLERY</li>
               <li>FACULTY</li>
               <li>EVENTS</li>
               <li>CONTACT</li>
           </ul>
       </div>
   </div>

<div class="banner">
   <img src="images/banner3.jpg" alt=""/>
   
   <div class="layer"></div>
   
   <div class="form">
       <form action="form_action.asp">
           <p><input type="text" style="width: 450px ;height: 30px;background: rgba(0,0,0,0);" placeholder="your Name"></p>
           <p><input type="text" style="width: 450px ;height: 30px;background: rgba(0,0,0,0);" placeholder="your Phone"></p>
           <p><input type="text" style="width: 450px ;height: 30px;background: rgba(0,0,0,0);" placeholder="your Email"></p>
            <p><textarea name="i" cols="30" rows="10" style="width: 450px ;height: 100px;background: rgba(0,0,0,0);" placeholder="Write Your Comment Here"></textarea></p>
       </form>
            <button>SEND MESSAGE</button>
   </div>
</div>

css：

*{
   padding:0;
   margin:0;
}
.clear{
   clear: both;
}
.header{
   width: 100%;
   height:80px;
   background-color: #07cbc9;
   position: fixed;
}
.header .logo{
   float:left;
   cursor: pointer;
}
.header .logo img{
   width: 260px;
   height: 48px;
   padding-top:16px;
   padding-left: 100px;
}
.header .nav{
   float: right;
}
.header .nav ul{
padding-right: 80px;
}
.header .nav ul li{
   list-style: none;
   cursor: pointer;
   color:#fff;
   float: left;
   font-family: "Microsoft YaHei";
   width:70px;
   height: 80px;
   line-height: 80px;
   font-size: 12px;
   font-weight: bold;
   text-align: center;
}
.header .nav ul li:hover{
   background-color: #000;
}
.banner{
   width: 100%;
   height: 450px;
}
.banner img{
   width: 100%;
   height: 450px;
}
.banner .layer{
   position: absolute;
   top:80px;
   left: 0px;
   opacity: 0.5;
   background-color: #000;
   width: 100%;
   height: 450px;
}
.banner .form{
   text-align: center;
   width: 600px;
   height: 300px;
   position: absolute;
   top:325px;
   margin-top:-150px;
   left: 50%;
   margin-left: -300px;
   z-index: 1;
}
.banner .form p{
   padding-bottom: 20px;
}
.banner .form p input{
    color:#fff;
    border: 1px solid grey;
}
.banner .form p textarea{
   padding-top: 8px;
   color:#fff;
    border: 1px solid grey;
}
.banner .form p :hover{
   border:1px solid #07cbc9;
}
button{
   width: 100px ;
   height: 30px;
   background: rgba(0,0,0,0);
   border: 1px solid grey;
   color:#fff;
}
button:hover{
   background: #07cbc9;
   border: none;
}

normcore 2017-05-15

源自：项目：网页布局案例 2-10 作业题