margin为负值产生的影响

问题

设置margin-top为负值时，前面的浮动元素也跟着向上移动移动，代码如下： html:

<div class="right">浮动元素</div>
<div class="div1">
    标准文档流
</div>

css:

 .right{
            float:right;
            border: 2px solid greenyellow;
}
.div1{
            border: 1px solid red;
            height: 50px;
            margin-top: -25px;
  }

注：浮动元素在前面，后面是标准元素，然后对标准元素,设置了margin-top:-25px , 然后会发现浮动元素跟着向上了

margin负值的作用

margin-left和margin-right为负值的时候都可以增加元素的宽度 而margin-top为负值的时候,不会增加高度,而是会让元素上移.

margin-bottom为负值的时候不会位移,而是会减少自身供css读取的高度.

文档流的影响

那些没有脱离文档流的元素（指不是浮动元素也不是绝对定位、固定定位的元素等），其在页面中的位置是跟随者文档流的变化而变化的。 总结，不脱离文档流不使用float的话，负margin元素是不会破坏页面的文档流

对浮动影响

负margin会改变浮动元素的显示位置，即使我的元素写在DOM的后面 上面的问题，就是由于这个原因产生的

解决方案：让设置负边距的元素，脱离文档流。或者让受影响的元素不浮动，不脱离文档流

对定位影响

对于绝对定位的元素,设置了margin负值之后,会根据它定位的位置进行再位移。适用于左右固定,中间自适应的三列布局(类圣杯布局,双飞翼布局)

参考: p1-jj.byteimg.com/tos-cn-i-t2…

更多文章，请关注【bug收集】或网站：bug收集