初學css，遇到一個布局的小問題？？
我自己練習一個小頁面，使用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 {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>
月光嶸 2022-07-12 15:49
或者main::after {content: ; clear: both; display:block;}清除浮動來撐開Main
圍城wsq 2022-07-12 15:54
你的Main坍縮了，就是main沒有包住你left,right兩個浮動元素，
拉翁萊塔普孟嘗君 2022-07-12 15:59
可以給main加上overflow:hidden,
