margin為啥可以取負(fù)數(shù)疏尿？
為了實(shí)現(xiàn)一些特別的布局效果凉逛。
margin為負(fù)值如何理解踊跟？
margin本意是兩個(gè)盒子之間的間距，那么margin為負(fù)值就是說兩個(gè)盒子重疊了涉茧？那只有一個(gè)盒子怎么辦赴恨？
假設(shè)A-B橫排放置，然后B是我們的研究對象伴栓，B的margin-left為-10.瀏覽器會(huì)怎么處理伦连？瀏覽器會(huì)把B向左移動(dòng)10px，如果設(shè)置B的margin-right為-10.這時(shí)就不是動(dòng)B了挣饥，而是把C左移動(dòng)10px除师。就這么個(gè)邏輯。
image.png
margin為負(fù)對float的影響
A元素不浮動(dòng)時(shí)扔枫。
margin-right就沒啥影響了汛聚，因?yàn)榫筒辉谕恍小?/p>
<style>
#mydiv1 { margin-right:-100px;}
</style>
<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>
結(jié)果如圖
image.png
A元素浮動(dòng)時(shí)
兩個(gè)div并排排列，margin發(fā)揮作用短荐。
<style>
/* A negative margin is applied opposite the float */
#mydiv1 {float:left; margin-right:-100px;}
</style>
<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>
結(jié)果
image.png
符合上面說的倚舀。給A設(shè)置的右邊-100的屬性，表現(xiàn)是B左移100px忍宋。
再看
<style>
#mydiv1 {float:left; margin-left:-100px;}
</style>
<div id="mydiv1">First</div>
<div id="mydiv2">Second</div>
左邊是負(fù)自己移動(dòng)痕貌，右邊是負(fù)鄰居移動(dòng)。
因此結(jié)果
image.png
![Uploading image_542898.png . . .]
