html - 初学css，遇到一个布局的小问题？
本文介绍了html - 初学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>
解决方案
float的元素脱离正常文本流，不计入父元素的高宽
也就是说，就算你给left/right设置了高宽，他的父元素main只承认top的高宽。
所以导致背景的白色没有按照你的想法把整个内容包裹住。
解决办法楼上已经给了一个，用::after伪类来撑开。
或者你计算好top+left+right的高度宽度，给main设置。
tips： 可以考虑采用min-height/width的方式来限定最小高度/宽度
这篇关于html - 初学css，遇到一个布局的小问题？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
