负margin的理解（一）

之前有在看大牛的博客，然后看到负margin,会想那个负margin值是怎么计算出来的，还有啥时候设置负margin是有效果，现在做如下总结

HTML 结构 

   

<div class="container">
       <div class="main-wrap">
             <h2>Main Content</h2>
        </div>
        <div class="aside sidebar">
              <h2>Sidebar Content</h2>
        </div>
</div>

   

main-wrap ， aside  为盒子模型   上下排列




1、盒子上下排列，上面盒子没有设置float属性，下面盒子设置float属性

.container{width:960px; margin:0 auto;}
.main-wrap{width:100%; background:#9C0}/* 重要 */
.aside{width:280px; background:#C09; float:left;margin-left:-280px;}/* 重要 */

效果如下：

下面盒子，无论负margin设置多少，只能在原来所在行浮动。（如上图  aside 只能在本行浮动） 

 
  

  2、盒子上下排列，上面盒子设置float属性，下面盒子没有设置float属性

.container{width:960px; margin:0 auto;}
.main-wrap{float:left;width:100%; background:#9C0;}/* 重要 */
.aside{width:280px; background:#C09;margin-left: -115px;}/* 重要,其中margin-left 负值自己自行调整 */

效果如下：

下面盒子降跑向上面盒子所在位置，上面盒子盖在下面盒子上面。 （如上图main-wrap 就会盖在 aside 上面） 

无论负margin设置多少，也只能在原来所在行浮动，负maring值越大超出浏览器显示，则直接隐藏不显示。

 
 

   3、盒子上下排列，上下盒子都设置float属性，

.main-wrap{float:left;width:100%;background:#9C0;}/* 重要 */
.aside{float:left;width:280px;background:#C09;}/* 重要 */

效果如下：

下面盒子将紧挨着上面盒子浮动。 

当负值正好大于等于下盒子宽度是下盒子跑到上盒子所在行

 

.main-wrap{float:left;width:100%; background:#9C0;}/* 重要 */
.aside{float:left;width:280px; background:#C09;margin-left: -280px;}/* 重要,其中margin-left 负值自己自行调整 */

效果如下：

 

 

 

  

转载于:https://www.cnblogs.com/zjx2011/archive/2012/08/15/2640167.html