css中关于float的问题
<styletype="text/css">#header{MARGIN:0px;BORDER:0px;BACKGROUND:#ccd2de;WIDTH:580px;HE...
<style type="text/css">
#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;}
#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; }
#menu{ FLOAT: right; MARGIN: 2px 0px 2px 0px; PADDING:0px 0px 0px 0px; WIDTH: 400px; BACKGROUND: #ccd2de; } #sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; }，
#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;}
#footer{ CLEAR: both; MARGIN: 0px 0px 0px 0px; PADDING: 5px 0px 5px 0px; BACKGROUND: #ccd2de; HEIGHT: 40px; WIDTH: 580px; }。
</style>
<body>
<div id="header">this is header</div>
<div id="mainbox">
<div id="menu">this is menu</div>
<div id="sidebar">this is sidebar</div>
<div id="content">this is content</div>
</div>
<div id="footer">this is footer</div>
</body>
问题：
如果我去掉#sidebar里面定义的FLOAT: left; “ this is menu”会往下移动，这是为什么？ 展开
#header{ MARGIN: 0px; BORDER: 0px; BACKGROUND: #ccd2de; WIDTH: 580px; HEIGHT: 60px;}
#mainbox { MARGIN: 0px; WIDTH: 580px; BACKGROUND: #FFF; }
#menu{ FLOAT: right; MARGIN: 2px 0px 2px 0px; PADDING:0px 0px 0px 0px; WIDTH: 400px; BACKGROUND: #ccd2de; } #sidebar{ FLOAT: left; MARGIN: 2px 2px 0px 0px; PADDING: 0px; BACKGROUND: #F2F3F7; WIDTH: 170px; }，
#content{ FLOAT: right; MARGIN: 1px 0px 2px 0px; PADDING:0px; WIDTH: 400px; BACKGROUND: #E0EFDE;}
#footer{ CLEAR: both; MARGIN: 0px 0px 0px 0px; PADDING: 5px 0px 5px 0px; BACKGROUND: #ccd2de; HEIGHT: 40px; WIDTH: 580px; }。
</style>
<body>
<div id="header">this is header</div>
<div id="mainbox">
<div id="menu">this is menu</div>
<div id="sidebar">this is sidebar</div>
<div id="content">this is content</div>
</div>
<div id="footer">this is footer</div>
</body>
问题：
如果我去掉#sidebar里面定义的FLOAT: left; “ this is menu”会往下移动，这是为什么？ 展开
2个回答
展开全部
我调试了一下，原因是这样的。
sidebar在floatleft的情况下。
是左右分布的。这时候因为都有margin-top 2px，所以看起来是很整齐的。
但是如果去掉sidebar的float:left
那么sidebar就占满一行。width:100%
这时候float:right的menu的margin-top就会跟sidebar的margin-top叠加。变成4px.就会显示出，错位的效果。
如果这时候你把menu的margin-top设置成0.就又变得对齐了。你可以试一下
sidebar在floatleft的情况下。
是左右分布的。这时候因为都有margin-top 2px，所以看起来是很整齐的。
但是如果去掉sidebar的float:left
那么sidebar就占满一行。width:100%
这时候float:right的menu的margin-top就会跟sidebar的margin-top叠加。变成4px.就会显示出，错位的效果。
如果这时候你把menu的margin-top设置成0.就又变得对齐了。你可以试一下
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
