margin为负值

margin为啥可以取负数？

为了实现一些特别的布局效果。

margin为负值如何理解？

margin本意是两个盒子之间的间距，那么margin为负值就是说两个盒子重叠了？那只有一个盒子怎么办？

假设A-B横排放置，然后B是我们的研究对象，B的margin-left为-10.浏览器会怎么处理？浏览器会把B向左移动10px，如果设置B的margin-right为-10.这时就不是动B了，而是把C左移动10px。就这么个逻辑。

image.png

margin为负对float的影响

A元素不浮动时。

margin-right就没啥影响了，因为就不在同一行。

First
Second

结果如图

image.png

A元素浮动时

两个div并排排列，margin发挥作用。

First
Second

结果

image.png

符合上面说的。给A设置的右边-100的属性，表现是B左移100px。

再看

First
Second

左边是负自己移动，右边是负邻居移动。
因此结果

image.png

![Uploading image_542898.png . . .]