我自己练习一个小页面，使用div布局，但是在页面主体内容的白色背景没有完全显示出来，下边的文字部分的背景颜色应该也是白色才对，请帮忙看看什么原因，谢谢。注：底部的div是和上边的header和main分离的，这样就不会出现main文字部分的白色背景，但是如果我把底部的div放在main内部class属性为right的div下边时，就会出现白色背景。
{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://wenda.whatsns.com/data/attach/logo/logo.png', '推荐 我在东郊餐馆捞海带 的问题《初学css，遇到一个布局的小问题？》','https://wenda.whatsns.com/q-304317.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
<!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>test</title> <style type="text/css"> body {margin:0;padding:0;font-size:14px;background:#9acd32;} /*头部*/ .header {width:100%;background:black;height:80px;} .head {width:700px;margin:0 auto 0;height:80px;} .header h1 {float:left;height:80px;line-height:80px;margin:0px;color:#9acd32;} .header ul {list-style:none;float:right;height:80px;line-height:80px;margin:0px;} .header ul li {float:left;padding:0 10px;} .header a {text-decoration:none;color:white;} .header a:hover {text-decoration:underline;color:red;} /*主体*/ .main {clear:both;margin:10px auto 0;width:680px;padding:10px 10px 0 10px;background:white;} .top {background:url("img/12.png");width:680px;height:150px;margin:0 0 10px 0;} .top h2 {color:#9acd32;height:150px;line-height:150px;margin:0;} .left {width:460px;float:left;margin:0 10px 0 0;} .left p {text-indent:2em;line-height:1.7em;} .left h3 {border-bottom:1px solid #9acd32;padding-bottom:5px;} .right {width:200px;float:left;margin:0 0 0 10px;} .sidebar {width:200px;height:215.375px;} .sidebar h3 {border-bottom:1px solid #9acd32;padding-bottom:5px;} .sidebar ul {list-style:none;margin:0px;padding:0px;} .sidebar ul li {padding:5px 0;} .sidebar p {text-align:right;} .sidebar a {text-decoration:none;color:#7e7e7e;} .sidebar a:hover {text-decoration:underline;color:red;} .searchin {width:100px;height:20px;} /*底部*/ .footer {clear:both;background:#7e7e7e;width:700px;height:50px;margin:0 auto 0;} .footer p {margin:0px;height:80px;line-height:80px;text-align:center;color:#fff;} </style> </head> <body> <!--页面头部部分--> <div class="header"> <div class="head"> <h1>我的博客</h1> <ul> <li><a href="">留言本</a></li> <li><a href="">友情链接</a></li> <li><a href="">关于自己</a></li> <li><a href="">我的日记</a></li> <li><a href="">首页</a></li> </ul> </div> </div> <!--页面主体内容部分--> <div class="main"> <div class="top"> <h2>欢迎来到我的博客</h2> </div> <div class="left"> <div> <h3>中新网</h3> <p>2017年度国家公务员考试报名将截止，截至23日的数据显示，报名过审人数已超百万大关。本次国考报名的“最热岗位”已基本锁定为民盟中央的一个职位，竞争比近“八千选一”，不过，目前仍有300余个职位“零报考”。</p> <p>截至23日16时30分，这一仅计划招录1人的职位，报名过审人数已有7727人，竞争程度即将达到“八千选一”，遥遥领先于“最热榜”排名第二的岗位(1261:1)。</p> </div> <div> <h3>中新网</h3> <p>2017年度国家公务员考试报名将截止，截至23日的数据显示，报名过审人数已超百万大关。本次国考报名的“最热岗位”已基本锁定为民盟中央的一个职位，竞争比近“八千选一”，不过，目前仍有300余个职位“零报考”。</p> <p>截至23日16时30分，这一仅计划招录1人的职位，报名过审人数已有7727人，竞争程度即将达到“八千选一”，遥遥领先于“最热榜”排名第二的岗位(1261:1)。</p> </div> <div> <h3>中新网</h3> <p>2017年度国家公务员考试报名将截止，截至23日的数据显示，报名过审人数已超百万大关。本次国考报名的“最热岗位”已基本锁定为民盟中央的一个职位，竞争比近“八千选一”，不过，目前仍有300余个职位“零报考”。</p> <p>截至23日16时30分，这一仅计划招录1人的职位，报名过审人数已有7727人，竞争程度即将达到“八千选一”，遥遥领先于“最热榜”排名第二的岗位(1261:1)。</p> </div> </div> <div class="right"> <div class="sidebar"> <h3>文章列表</h3> <ul> <li><a href="">中新网</a></li> <li><a href="">中新网</a></li> <li><a href="">中新网</a></li> <li><a href="">中新网</a></li> <li><a href="">中新网</a></li> </ul> <p><a href="">更多>></a></p> </div> <div class="sidebar"> <h3>友情链接</h3> <ul> <li><a href="">腾讯</a></li> <li><a href="">百度</a></li> <li><a href="">阿里</a></li> <li><a href="">搜狐</a></li> <li><a href="">新浪</a></li> </ul> <p><a href="">更多>></a></p> </div> <div class="sidebar"> <h3>搜索列表</h3> <form method="post" action=""> <input type="text" name="search" class="searchin"> <input type="submit" name="sub" value="search"> </form> </div> </div> </div> <!--页面底部部分--> <div class="footer"> <p>©我的博客</p> </div> </body></html>
或者
main::after{content: ; clear: both; display:block;}清除浮动来撑开Main一周热门 更多>