1、margin为负数会发生什么

1. width为auto，或不存在width属性。left和right使宽度增加，top向上位移，bottom减少css可读取高度

2. 对文档流：使用负margin上移一个元素，所有跟随的元素都会被上移。不破坏文档流

3. 对浮动元素：负margin会改变浮动元素的显示位置，即使我的元素写在DOM的后面，我也能让它显示在最前面。圣杯布局、双飞翼布局啊什么的，都是利用这个原理实现的。

4. 对绝对定位的影响（absolute):负margin会基于其绝对定位坐标再偏移

5. 常见布局应用

   1. 左右固定，中间自适应（双飞翼布局）

      1.可以让主要内容出现在dom结构的前面，现将主要内容渲染
      2.中间只适应，两边固定宽度的效果

              .main {
                  float: left;
                  width: 100%;
      
              }
      
              .main .main-content {
                  margin: 0 210px;
                  background-color: rgba(33, 114, 214, 0.8);
                  height: 500px
              }
      
      
              .left {
                  width: 200px;
                  float: left;
                  background-color: rgba(255, 82, 0, 0.8);
                  margin-left: -100%;//-100%相对于整个屏幕，相当于-1349px
                  height: 200px
              }
      
              .right {
                  width: 200px;
                  height: 200px;
                  margin-left: -200px;//-200回到右边
                  float: left;
                  background-color: rgba(90, 243, 151, 0.8);
              }