webHTML请教!
<!-- prj_4_1.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="layout_1.css" />
</head>
<body>
<div id="container">
<div id="header">这是头部信息区</div>
<div id="nav">这是导航信息区</div>
<div id="maincontent">
<div id="main">这是主体信息区</div>
<div id="side">只是右侧信息区</div>
</div>
<div class="clearfloat"></div>
<div id="footer">这是版权信息区</div>
</div>
</body>
</html>
div{margin: 0px auto;font-weight: bolder;font-size: 28px;line-height: 1.5em;}
#container{width: 900px;margin: 0px auto;}
#header{height: 70px;background-color: #CCFFCC;margin-bottom: 8px;}
#nav{height: 40px;background-color: #CCFFCC;margin-bottom: 8px;}
#maincontent{margin-bottom: 8px;}
#main{float: left;width: 664px;height: 400px;background-color: #ffff99;}
#side{float: right;width: 228px;height: 400px;background-color: #FFCC99;}
.clearfloat{clear: left right;}
#footer{height: 70px;background-color: #CCFFCC;border-top: 8px solid white;}
为啥啊，为什么最后一个div背景什么的跑到上面被挡住了资源下载，内容还在下面，应该怎么改啊
<div id="maincontent">
<div id="main">这是主体信息区</div>
<div id="side">只是右侧信息区</div>
<div style="clear:both"></div>
</div>
<div id="footer">这是版权信息区</div>
中间模块没设置高度
#maincontent {
margin-bottom: 8px;
height: 400px;
}
或者footer用position定位在底部
#maincontent{
overflow:hidden;
height:auto;
}
或者直接设定高度。
出现问题原因:浮动后脱离文档流
发生了浮动。多种解决方法，最简单的overflow:hidden;其次加个空div，clear:both;第三种万能清除
overflow:hidden