我到底哪里错了，为什么footer区域会跑到main区域去？
<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
中间图片加了float，浮动了，于是父元素塌陷了，这是浮动特性；提供2种方法：一种方法是给.footer直接加 clear:both，但这样只是让footer回到正常位置，但是塌陷没清除;另外一种方法是给.pic加上after为元素，如： .pic:after{content:"";display:block;clear:both;}
随时随地看视频慕课网APP
Html/CSS
前端工具