margin负值应用

我理解的最关键的一点是：

在文档流中，只能是后面的流向前面的，即文档流只能向左或向上流动，不能向下或向右移动。
第二个元素的基准线是第一个元素的右边界，第三个元素的基准线是第一、二个元素排好后最右边的边界，第四个元素的基准线是第一、二个元素排好后最右边的边界、、、

拿一个圣杯布局来说

html代码

1 2 3 4 5 6 7 8

<div id="three_columns"> <div class="middle"> <div class="content">中间主体区块宽度自适应</div> </div> <div class="left">左列定宽200px</div> <div class="right">右侧定宽300px</div> <div class="foot">底部</div> </div>

 

css代码

#three_columns{width :800px ; height: 600px;margin:
10px auto;background: #ddd}
.middle,.left,.right {
    height: 300px;
    font: bolder 20px/300px '微软雅黑';
    color: #fff;
    text-align: center;
}
.middle {
    width: 100%;
    float: left;
    background: black;
}
.left {
    width: 200px;
    float: left;
    margin-left: -100%;
    background-color: red;
}
.right {
    width: 300px;
    float: left;
    margin-left: -300px;
    background-color: blue;
}
.foot{background: #ff0;height: 80px;clear:both;}

首先main在文档流中先输出，宽度为父元素three_columns的宽度，然后输出left，left以main的右边的边界定位，margin-left: -100%;就是让left移动到它的左边的边界和main右边的边界重合。
然后轮到right，此时最右边的边界为main的右边，设置right的margin-left: -300px;让right相对于main的右边左移300px。

那如果把right设为margin-left: -200px;呢？来看看效果

再来把right设为margin-left: -400px;呢？来看看效果

可以看出，当right左移的距离没有超过自身宽度时它是随着文档流被挤到了下方。当right左移的距离超过了自身宽度时，它被挤到了上方覆盖了main。

扩展阅读

圣杯、双飞翼布局