2个连续的float元素，设置后面的元素margin为负值时，会跑到前一个元素边上？

Question

<div class='contain clearfix'>
  <div class='show'><div class='secondtext'>DOM位置与显示位置一样DOM位置与显示位置一样DOM位置与显示位置一样DOM位置与显示位置一样DOM位置与显示位置一样DOM位置与显示位置一样DOM位置与显示位置一样DOM位置与显示位置一样DOM位置与显示位置一样DOM位置与显示位置一样DOM位置与显示位置一样DOM位置与显示位置一样DOM位置与显示位置一样DOM位置与显示位置一样DOM位置与显示位置一样</div></div>
  <img class='secondpng' src='http://jiaminzhou.com/wp-content/uploads/2016/06/cropped-QQ%E5%9B%BE%E7%89%8720160624164558-1.jpg'>
</div>

 .clearfix:after{
content:"";display:block;height:0;overflow:hidden;clear:both;
} 
.contain{
  background:gray;
}
.show{
  width:100%;
  float:left;
}
.secondpng{
  width:150px;
  float:left;
  margin-left:-150px;
}
.secondtext{
  margin-right:160px;
}

得到结果：

可以在codepen 里看：
float问题

Answer 1

**

css标准，float元素上的负margin表示把下面的元素向对应方向移动，并且覆盖上一个元素（这里是指html中元素的声明顺序）。

**