我在设计一页CSS时是CSS的新手
body {width:100%;height:920px;margin:0;list-style:none;padding:0;}
.side{background-color:#9966FF; width:20%;height:920px;float:left;}
.main{background-color:#CCFFFF; width:80%;height:920px;}
<body>
<div class="side">Its side bar</div>
<div class="main">ites center bar</div>
</body>但是它在主类之后给了我一些空白，所以我的理解是，如果我将身体设为100％，它将在.side和.main类中将该空间分为20％和80％，请纠正我吗？
实际上，float: leftondiv.side的作用是使主体的宽度的100％可用于div.main。这就是浮动的工作原理。因此，只需删除，width: 80%然后改为margin-left: 20%;完成即可。
为了更好地了解发生了什么，请检查以下小提琴：https : //jsfiddle.net/ex6w7tnz/1/
（删除了div.main上的宽度，但未添加左边距。）
因此，浮动div.side不会影响的宽度div.main，而只会影响内容在其中正确的位置div.side。这称为浮动:)因此，当您将div.main的宽度分配为80％时，您认为正确的“空白”就是div.main所做的人体100％的剩余20％宽度不使用。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句