css如何使用浮動元素負(fù)邊距

這篇文章主要介紹css如何使用浮動元素負(fù)邊距，文中介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們一定要看完！

float元素

負(fù)邊距對float元素的影響也是按照上面說的，不過有其特殊性，我們看個例子就很清楚了

浮動元素負(fù)邊距

<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的負(fù)邊距

這時候發(fā)現(xiàn)第三個元素移上去了，并且覆蓋了第二個元素20px，經(jīng)典的多列布局正是利用此原理

以上是“css如何使用浮動元素負(fù)邊距”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！