两个div给其中一个设置浮动之后发生的占位问题
今天遇到一个问题怎么想也想不明白,来求助一下,首先上代码
<style>
#box{
width: 200px;
height: 600px;
border:1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background: red;
float: right;
margin-right: 50px;
}
.box2{
width:100px;
height: 100px;
background: yellow;
margin-right: 40px;
}
</style>
</head>
<body>
<div id='box'>
<div class="box1"></div>
<div class="box2">wwwwwwwwwwwwwww</div>
</div>
以上代码运行之后会发现给box1设置浮动和margin之后,会把box2中的字符顶下来,但是如果把margin-right这条属性去掉之后就不会被顶下来,会超出到box1范围内,所以我的问题是明明浮动元素是脱标的,为什么在设置margin-right之后反而会进行占位呢