css如何使用浮动元素负边距

这篇文章主要介绍css如何使用浮动元素负边距，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

float元素

负边距对float元素的影响也是按照上面说的，不过有其特殊性，我们看个例子就很清楚了

浮动元素负边距

<style>
.float{
overflow:hidden;
width:280px;
border:dashed 1px orange;
}
.float .item{
width:100px;
height:100px;
float:left;
}
.float .item:nth-child(1){
background:red;
}
.float .item:nth-child(2){
background:grey;
}
.float .item:nth-child(3){
background:blue;
}
</style>
<div class="float">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

在一个宽度为280px的div中右3个float:left的子元素，宽度为100px，由于一排放不下，最后一个陪移动到了下一行

我们对代码稍作修改

<style>
.float{
overflow:hidden;
width:280px;
border:dashed 1px orange;
}
.float .item{
width:100px;
height:100px;
float:left;
}
.float .item:nth-child(1){
background:red;
}
.float .item:nth-child(2){
background:grey;
}
.float .item:nth-child(3){
background:blue;
margin-left:-20px;
}
</style>
<div class="float">
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
</div>

第三个元素添加-20px的负边距

这时候发现第三个元素移上去了，并且覆盖了第二个元素20px，经典的多列布局正是利用此原理

以上是“css如何使用浮动元素负边距”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注亿速云行业资讯频道！