<style type="text/css">*{margin:0;padding:0;}ul{list-style:none;}img{border:none;}a{text-decoration:none;}.header{position:relative; z-index:2; box-shadow:0 0 7px 0 rgba(186,186,186,0.5);}.header-inner{width:1144px; height:85px; margin:0 auto;}.inner-left{width:855px;}.logo{float:left; width:158px; height:48px; padding-top:18px;}.header-inner ul{margin-left:200px;}.header-inner li{float:left;}.header-inner li a{display:block; height:80px; line-height:80px; font-family:arial; padding:0 24px; color:#414b4c; font-size:15px; border-top:3px solid #fff;}.header-inner li a:hover{color:#e97609; border-top:3px solid #eb5846; background-image:url(../images/index-a_03.jpg); background-repeat:repeat-x;}.header-inner li .x{display:block; height:80px; line-height:80px; font-family:arial; padding:0 24px; font-size:15px; color:#e97609; border-top:3px solid #eb5846; background-image:url(../images/index-a_03.jpg); background-repeat:repeat-x;}.header-inner li .x:hover{color:#e97609;}.inner-right{float:right;}.inner-right a{width:22px; height:22px; display:block; margin:20px 3px; float:left;}.inner-right .f{background-image:url(../images/s-icons.png); background-repeat:no-repeat; background-position:-242px -7px;}.inner-right .f:hover{ background-image:url(../images/s-icons.png); background-repeat:no-repeat; background-position:-242px -45px;}.inner-right .niao{background-image:url(../images/s-icons.png); background-repeat:no-repeat; background-position:-268px -7px;}.inner-right .niao:hover{background-image:url(../images/s-icons.png); background-repeat:no-repeat; background-position:-268px -45px;}.inner-right .wife{background-image:url(../images/s-icons.png); background-repeat:no-repeat; background-position:-295px -7px;}.inner-right .wife:hover{background-image:url(../images/s-icons.png); background-repeat:no-repeat; background-position:-295px -45px;}.inner-right .v{background-image:url(../images/s-icons.png); background-repeat:no-repeat; background-position:-319px -7px;}.inner-right .v:hover{background-image:url(../images/s-icons.png); background-repeat:no-repeat; background-position:-319px -45px;}.inner-right .you{background-image:url(../images/s-icons.png); background-repeat:no-repeat; background-position:-344px -7px;}.inner-right .you:hover{background-image:url(../images/s-icons.png); background-repeat:no-repeat; background-position:-344px -45px;}.inner-right .in{background-image:url(../images/s-icons.png); background-repeat:no-repeat; background-position:-369px -7px;}.inner-right .in:hover{background-image:url(../images/s-icons.png); background-repeat:no-repeat; background-position:-369px -45px;}.main{text-align:center;}.main h2{font-family:arial; color:#010002; width:1142px; margin:0 auto; font-size:25px; line-height:92px; height:92px;}.main .nav{font-family:arial; display:inline-block; line-height:65px; padding-left:17px; color:#222; font-size:16px;}.main .pic{width:1144px; margin:0 auto;}.pic-a{width:286px; height:184px; float:left; position:relative;}.pic-a img{width:100%; height:100%; }.pic-a a{width:100%; height:100%; background-color:rgba(0,0,0,0.5); position:absolute; top:0; left:0; color:#fff; display:block; display:none;}.pic-a:hover a{display:block;}.footer{height:320px;}.footer-top{height:270px; background-color:#373737;}</style><body><body><div class="header"> <div class="header-inner"> <div class="inner-left"> <div class="logo"><a href="#"><img src="images/logo.png" /></a></div> <ul> <li><a href="#" class="x">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Features</a></li> <li><a href="#">Blog</a></li> <li><a href="#">Contact</a></li> </ul> </div> <div class="inner-right"> <a href="#" class="f"></a> <a href="#" class="niao"></a> <a href="#" class="wife"></a> <a href="#" class="v"></a> <a href="#" class="you"></a> <a href="#" class="in"></a> </div> </div></div><div class="main"> <h2>Portfolio</h2> <div class="nav">ALL</div> <div class="nav">CATEGORY1</div> <div class="nav">CATEGORY2</div> <div class="nav">CATEGORY3</div> <div class="nav">CATEGORY4</div> <div class="pic"> <div class="pic-a"> <img src="images/s1.jpg" /> <a href="#">告诉你一个我的秘密</a> </div> <div class="pic-a"> <img src="images/s2.jpg" /> <a href="#">点开第三张我就告诉你</a> </div> <div class="pic-a"> <img src="images/s3.jpg" /> <a href="#">现在我先告诉你这件事我一般不和人说</a> </div> <div class="pic-a"> <img src="images/s4.jpg" /> <a href="#">今天过节就告诉你</a> </div> <div class="pic-a"> <img src="images/s5.jpg" /> <a href="#">我的秘密就是…………</a> </div> <div class="pic-a"> <img src="images/s6.jpg" /> <a href="#">其实我每天早上都是被自己帅醒的</a> </div> <div class="pic-a"> <img src="images/s1.jpg" /> <a href="#">告诉你一个我的秘密</a> </div> <div class="pic-a"> <img src="images/s2.jpg" /> <a href="#">告诉你一个我的秘密</a> </div> <div class="pic-a"> <img src="images/s6.jpg" /> <a href="#">告诉你一个我的秘密</a> </div> <div class="pic-a"> <img src="images/s4.jpg" /> <a href="#">告诉你一个我的秘密</a> </div> <div class="pic-a"> <div class="pic-a"> <img src="images/s5.jpg" /> <a href="#">告诉你一个我的秘密</a> </div> </div> <div class="pic-a"> <img src="images/s3.jpg" /> <a href="#">告诉你一个我的秘密</a> </div> </div></div><div class="footer"> <div class="footer-top"></div> <div class="footer-bot"></div></div></body></html></body></html>
1 回答
stone310
TA贡献361条经验 获得超191个赞
中间图片加了float，浮动了，于是父元素塌陷了，这是浮动特性；
提供2种方法：
一种方法是给.footer直接加 clear:both，但这样只是让footer回到正常位置，但是塌陷没清除;
另外一种方法是给.pic加上after为元素，如： .pic:after{content:"";display:block;clear:both;}
添加回答
举报
0/150
提交
取消