我自己练习一个小页面，使用div布局，但是在页面主体内容的白色背景没有完全显示出来，下边的文字部分的背景颜色应该也是白色才对，请帮忙看看什么原因，谢谢。注：底部的div是和上边的header和main分离的，这样就不会出现main文字部分的白色背景，但是如果我把底部的div放在main内部class属性为right的div下边时，就会出现白色背景。
<!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 {wid优艾设计网_Photoshop论坛th: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>
月光嵘 2022-07-12 15:49 优艾设计网_设计圈
或者main::after {content: ; clear: both; display:block;}清除浮动来撑开Main
围城wsq 202优艾设计网_在线设计2-07-12 15:54
你的Main坍缩了，就是main没有包住你left,right两个浮动元素，
拉翁莱塔普孟尝君 优艾设计网_Photoshop问答 2022-07-12 15:59
可以给main加上overflow:hidden,
加载中,请稍侯......
精彩评论