原文鏈接：
負(fù)邊距詳解
在static元素中使用負(fù)邊距
static元素：沒有使用過float的元素
image
- 在top/left使用負(fù)邊距時谬擦，它把元素向這個特定的方向拉
/* Moves the element 10px upwards */
<div style="width: 100px;height: 100px;margin-top: -10px;overflow: hidden;">
<p>item11112222222</p>
<p>item33333444444</p>
<p>item55555666666</p>
</div>
前后對比：
移動前
移動后
- 在bottom/right使用負(fù)邊距時瞬矩，將后面/右側(cè)的元素往里拉覆蓋自己
/*
將第一個div后面的元素全部向上拉50px，覆蓋掉前一個div
*/
<div style="width: 100px;height: 100px;overflow: hidden;margin-bottom: -50px;">
<p>item11112222222</p>
<p>item33333444444</p>
<p>item555556666666</p>
</div>
<div style="width: 100px;height: 100px;overflow: hidden;">
<p>item11112222222</p>
<p>item33333444444</p>
<p>item555556666666</p>
</div>
前后對比：
移動前
移動后
- 未設(shè)置寬度時蒋搜，左右負(fù)邊距會把元素往兩個個方向拉來增加寬度，此時margin的作用相當(dāng)于padding
在浮動元素中使用負(fù)邊距
- 對一個浮動元素使用負(fù)邊距凡橱，會產(chǎn)生空白呛踊，其他元素可以覆蓋這個空白，用于用戶流式布局即纲，eg：右側(cè)固定寬度具帮，左側(cè)自適應(yīng)寬度。
index.html:
<div class="left">
<div class="left-element">item1</div>
</div>
<div class="right">item2</div>
css:
.left {
width: 100%;
float: left;
}
.left-element {
height: 100px;
background-color: red;
margin-right: 100px;
}
.right {
width: 100px;
height: 100px;
float: right;
margin-left: -100px;
background-color: blue;
}
- 如果兩個元素都使用了左浮動并且設(shè)置margin-right:-20px。#mydiv2會把#mydiv1看成寬度縮小20px（所以會覆蓋一部分）蜂厅，但是#mydiv1并不會有任何變化匪凡，而是依然保持原先的寬度。
<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>
- 如果負(fù)邊距和寬度一樣大的話掘猿，它就會被完全覆蓋掉病游。
解決bug
-
文本和鏈接問題
在float中使用負(fù)邊距可能會在舊的瀏覽器造成一些問題，比如：- 鏈接不可點(diǎn)擊
- 文本變得很難選擇
- 失去焦點(diǎn)的時候按tab鍵失效
解決方法：添加position:relative稠通。
圖片被剪切
使用IE6時衬衬，當(dāng)遇到覆蓋和浮動的時候內(nèi)容有些時候會突然被剪切掉。
解決方法：同樣的只要給浮動元素加上position:relative改橘。
