GALLERY区内容上浮

<!DOCTYPE html>
<html>
   <head>
       <meta charset="{CHARSET}">
       <title></title>
       <link rel="stylesheet" href="CSS/style.css" />
   </head>
   <body>

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

       <div class="banner">
           <img src="images/banner3.jpg">
       </div>

       <div class="bannerlayer"></div>

       <div class="form">
           <form>
               <input type="text" name="username" placeholder="uesrname" /><br/>
               <input type="password" name="paw" placeholder="password" /><br/>
               <input type="email" name="e-mail" placeholder="E-mail"/><br/>
               <textarea name="" rows="5" cols="60" placeholder="Write Your Comment Here"></textarea><br/>
               <button>SEND MESSAGE</button>
           </form>
       </div>

       <div class="about">
           <div class="container">
               <div class="title">
                   <h1>ABOUT</h1>
                   <div class="hrr"></div>
                   <p>Lerem Ipsum is simply dummy text of the printing and typesetting<br>
                   industry.Lorem has been the industry's standard dummy<br>
                   text ever since the 1500s.
                   </p>
               </div>
               <div class="content">
                   <div class="box1">
                       <h1>A WORD<br>ABOUT US</h1>
                   </div>
                   <div class="box2">
                       <img src="images/bb3.jpg">
                   </div>
                   <div class="box3">
                       <div class="box4">
                           <h1>7000</h1>
                           <div class="hrr"></div>
                           <p>Students</p>
                       </div>
                       <div class="box5">
                           <h1>600</h1>
                           <div class="hrr"></div>
                           <p>Faculty</p>
                       </div>
                   </div>
               </div>
               <div class="cont_layer">
                   <p>Praesent dignissim viverra est, sed<br>
                   bibendum ligula congue non. Sed ac nisl<br>
                   et feils gravida commodo? Suspendisse<br>
                   eget ullamcorper ipsum.Susperdisse<br>
                   diam amet
                   </p>
                   <button>EXLORE</button>
               </div>
           </div>
           <div class="pics">
                   <div><img src="images/b1.jpg"></div>
                   <div class="box78">
                       <h2>Coference Hall</h2>
                       <p class="word">Lerem Ipsum is simply dummy text of the printing and typesetting</p>
                       <p class="word1">Praesent dignissim viverra est, sed<br>
                           bibendum ligula congue non. Sed ac nisl<br>
                           et feils gravida commodo? Suspendisse<br>
                           eget ullamcorper ipsum.Susperdisse<br>
                           diam amet
                       </p>
                       <button>EXLORE</button>
                   </div>
                   <div><img src="images/b2.jpg"></div>
                   <div class="box78">
                       <h2>Coference Hall</h2>
                       <p class="word">Lerem Ipsum is simply dummy text of the printing and typesetting</p>
                       <p class="word1">Praesent dignissim viverra est, sed<br>
                           bibendum ligula congue non. Sed ac nisl<br>
                           et feils gravida commodo? Suspendisse<br>
                           eget ullamcorper ipsum.Susperdisse<br>
                           diam amet
                       </p>
                       <button>EXLORE</button>
                   </div>
                   <div class="box78">
                       <h2>Coference Hall</h2>
                       <p class="word">Lerem Ipsum is simply dummy text of the printing and typesetting</p>
                       <p class="word1">Praesent dignissim viverra est, sed<br>
                           bibendum ligula congue non. Sed ac nisl<br>
                           et feils gravida commodo? Suspendisse<br>
                           eget ullamcorper ipsum.Susperdisse<br>
                           diam amet
                       </p>
                       <button>EXLORE</button>
                   </div>
                   <div><img src="images/b3.jpg"></div>
                   <div class="box78">
                       <h2>Coference Hall</h2>
                       <p class="word">Lerem Ipsum is simply dummy text of the printing and typesetting</p>
                       <p class="word1">Praesent dignissim viverra est, sed<br>
                           bibendum ligula congue non. Sed ac nisl<br>
                           et feils gravida commodo? Suspendisse<br>
                           eget ullamcorper ipsum.Susperdisse<br>
                           diam amet
                       </p>
                       <button>EXLORE</button>
                   </div>
                   <div><img src="images/b4.jpg"></div>
           </div>
           <div class="clear"></div>
       </div>

       <div class="gallery">

       </div>
   </body>
</html>

*{margin: 0;padding: 0;}
.header{
   width: 100%;
   height: 80px;
   background-color: #07cbc9;
}
.header .logo{
   width: 260px;
   height: 48px;
   padding-top: 16px;
   margin-left: 100px;
}
.header .logo img{
   width: 260px;
   height: 48px;
}
.header .nav{
   margin-right: 100px;
   float: right;
   margin-top: -30px;
}
.header .nav ul li{
   float: left;
   list-style: none;
   color: white;
   font-size: 15px;
   font-weight: bold;
   padding-left: 20px;
}
.header .nav ul li a{
   text-decoration: none;
}
.header .nav ul li a:link{
   color: white;
}
.header .nav ul li a:visited{
   color: white;
}
.clear{clear: both;}
.banner{
   width:100%;
   height: 500px;
}
.banner img{
   width:100%;
   height: 500px;
}
.bannerlayer{
   position: absolute;
   top: 80px;
   left: 0;
   width:100%;
   height: 500px;
   background-color: black;
   z-index: 1;
   opacity: 0.5;
}
.form{
   position: absolute;
   top: 150px;
   left:42%;
   margin-left: -135px;
   width:510px ;
   height:371px ;
   background:none;
   z-index: 2;
   text-align: center;
   font-size: 15px;
   font-family: "微软雅黑";
   color: grey;
}
.form input:hover{
   border:2px #07cbc9 solid ;
}
.form input{
   width: 510px;
   height:43px ;
   border:2px grey solid;
   margin-top: 20px;
   background:none;
   border-radius: 5px;
   color: gray;
}
.form textarea{
   margin-top: 20px;
   width:510px ;
   height: 119px;
   border:2px grey solid;
   background:none;
   color: grey;
   border-radius: 5px;
}
.form textarea:hover{
   border:2px #07cbc9 solid ;
}
button{
   height:43px;
   width: 123px;
   border:2px grey solid;
   background:none;
   margin-top: 20px;
   color: grey;
   border-radius: 5px;
}
button:hover{
   border: none;
   background-color:#07cbc9 ;
}
.container{
   max-width:1080px;
   margin: 0 auto;
   display: block;
}
.about{background-color: white;height: 500px;position: relative; }
.about .title{
   width: 100%;
   height: 100px;
   text-align: center;
   padding-top: 30px;
}
.about .hrr{
   height: 10px;
   width: 35px;
   line-height: 10px;
   border-bottom: 2px #07cbc9 solid;
   margin: 0 auto;
}
.about .title p{
   font-size: 15px;
   font-family: "微软雅黑";
   color: gray;
}
.about .content {
   width: 100%;
   height: 380px;
   text-align: center;
   padding-top: 30px;
}
.about .content .box1{
   width: 200px;
   height:380px ;
   float: left;
}
.about .content .box2{
   width: 568px;
   height:380px;
   float: left;
}
.about .content .box2 img{
   width: 568px;
   height: 380px;
}
.about .content .box3{
   width: 240px;
   height: 380px;
   float: left;
   padding-left: 20px;
}
.about .content .box3 p{
   padding-top: 30px;
}
.about .content .box4{
   width: 238px;
   height: 144px;
   border:1px #07cbc9 solid ;
   padding-top: 30px;
}
.about .content .box5{
   width: 238px;
   height: 144px;
   border:1px #07cbc9 solid ;
   margin-top: 20px;
   padding-top: 30px;
}
.cont_layer{
   position: absolute;
   top: 250px;
   left:200px;
   width: 340px;
   height: 216px;
   border: 1px gray solid;
   z-index: 1;
   opacity: 0.5;
   background-color: white;
   color: black;
   padding: 20px;
}
.cont_layer p{
   font-family: "微软雅黑";
   font-size: 15px;
   color:black;
   line-height: 1.5em;
}
.cont_layer button{
   widows: 102px;
   height: 45px;
   background: #000000;
   color:#fff;
}
.about .pics{
   width: 100%;
   height: 600px;
   margin-top: 100px;
   overflow: hidden;
}
.about .pics div{
   height: 300px;
   width: 25%;
   color: white;
   float: left;
}
.about .pics div img{
   height: 300px;
   width: 100% ;
}
.about .pics .box78{
   height: 260px;
   width: 22.3%;
   background-color: #07cbc9;
   font-size: 13px;
   color: #fff;
   padding: 20px;
}
.about .pics button{
   widows: 102px;
   height: 45px;
   background: #000000;
   color:#fff;margin-left: 100px;
}
.about .pics .word{
   font-size: 17px; margin-top: 20px;
}
.about .pics .word1{
   font-size: 14px; color: grey; margin-top: 20px;
}
.gallery{
   background-color: white;height: 500px;position: relative;
}