margin-left失效

Question

<div class="area clearfix">
   <div class="box"></div>
</div>
css
.area {
  width: 400px;
  height: 400px;
  background: red;
}
.area .box {
  width: 100px;
  height: 100px;
  background: green;
  float: right;
  margin-left:1000px
}
这里的margin-left为什么失效？因为右浮动的关系吗？

Answer 1

右浮动用margin-right

Answer 2

CSS的float 属性可以使一个元素脱离正常的文档流，然后被安放到它所在容器的的左端或者右端，并且其他的文本和行内元素围绕它安放。

参考资料：float-CSS| MDN

Answer 3

float: right;
margin-left:1000px

the reason why this code doesn't work is that you can't combine "float:right and margin-left",target css code can write as below:

float:right
margin-right:-1000px

or

float:left
margin-left:-1000px

you can have a try