如何理解margin值为负

通常来说margin为正值时，我们很清楚其布局形式，即在border边界线处再往外扩展指定长短。可margin为负又表示什么呢，表示始于border边界线处并向内扩展指定长短，这样，下一个文档流对象便是从margin边界线处起，显示出来。代码示例：

<div style="margin-right:-100px; background-color:#CCCCCC; width:200px;">1</div>

页面效果：

此时有一个margin边界线我们看不到，其位置是在border边界线向内100px处，即200-100=100px处。

<div style="margin-right:-100px; background-color:#CCCCCC; height:100px; width:200px;"></div>
<div style="width:150px; float:left; background-color:#0033CC; height:100px;">

我们看，此时由于两个div标签为块级元素，故不涉及到右margin边界线，两个对象完全显示出其定义的长度和宽度。

<div style="margin-right:-100px; background-color:#CCCCCC; height:100px; width:200px; float:left;"></div>
<div style="width:150px; float:left; background-color:#0033CC; height:100px;">

此时由于float：left作用，两个块级元素显示到了一行内，第二个div标签的起始处便是右margin边界，即100px处，而非border边界处200px处。