问题
设置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负值之后,会根据它定位的位置进行再位移。适用于左右固定,中间自适应的三列布局(类圣杯布局,双飞翼布局)
参考 :https://blog.csdn.net/weixin_30632899/article/details/96887870