一、【这部分内容纯属于自己总结的，不权威但实用】一定要记住div是流式布局，就像水流一样，但他只能从上往下流以及从左往右流，不会反过来，这点非常重要。
理解了这点就会明白对div来说，margin-left优先级最高，其次是width属性，再次是margin-right属性，因为是从左往右流式布局的。
比如：
<body><div style="width:100%;height:40px;background:red;margin-right:200px;"/></body>
则显示出的红色条带宽度占满整个body。因为先计算width为等于body的宽度，才考虑margin-right。
而：
<body><div style="width:100%;height:40px;background:red;margin-left:200px; margin-right:200px"/></body>
则显示出的红色条带左边空出200px的白色区域，右边不空出来。因为先margin-left为200，空出200的空白区域，然后width为body的宽度发现不够了则尽量铺满（其实是超出部分向右边溢出了），最后再考虑margin-right，其实此时margin-right已经没用了。
实际上对于从左到右的流式布局而言，maring-right正常情况下基本没用，他不是用来控制本div的位置的，而是当div设为inline内联的display时，控制下一个div离本div右边的距离的。
【另外，对于向容器的两边溢出可以认为是实际上也就是当“margin设为负值”时，div元素的宽度缩短了“margin设的负值大小”，而不再是原来大小了，这也是负边距经常作为特殊用法之处。常用这个负边距特性来定义自适应多列的排版要求，见下一篇博客：负边距(negative margin)实现自适应的div左右排版（一个宽度固定一个宽度自适应）”】
除了上面的例子，再看下面的：
<body><div style="margin-left:-100px; width: 100%;margin-right:8000000px;background:red"></body>
此时，显示的出的红色条带左边不空出来，但右边空出来100px。不要以为是margin-right起的作用，其实这里margin-right纯粹是迷惑人的，没任何作用，我故意把他设的非常大。分析原因是，先技术margin-left发现为负的100，则左移溢出100px，然后计算width为body的宽度，但是这个宽度计算好就不变了，margin-right不起作用，然后开始绘制，由于左边溢出100，所以那个计算好后不变的宽度自然就不可能填满这个body了，所以出现右边空出100px的空白现象。
那么有没有办法改变从左往右的布局方式呢？答案就是使用float:right。
如下：
<body<div style="float:right;margin-left:-100px; width: 100%;background:red;margin-right:100px"></body>
此时就从右往左布局了，结果就是先计算margin-right为100，然后width为body的宽度（超出部分向左溢出，因左边优先级最低），而margin-left无论设为多少都不起作用了。
但是如果上面的float设为left就又变成左到右布局的了，就和上面讨论的例子没什么区别了。
最后说一下对于float还有更特殊和复杂的地方和用法或技巧，参加下一篇博客：负边距(negative margin)实现自适应的div左右排版（一个宽度固定一个宽度自适应）”
862
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
