這篇主要討論的就是margin負值與float的關系。
- 首先，例子。
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title> <style type='text/css'> html,body{padding:0;margin:0;} div{width:100px;height:100px;float:left;margin:0;} div.box{width:300px;float:left;margin-left:60%;background:blue;} .a{background:red; margin-left:0px;}.b{background:green; margin-left:0;}.c{background:black; margin-left:0px;} </style> </head><body> <div class="box"> <div class="a"></div> <div class="b"></div> <div class="c"></div></div></body> </html>
在這里面，三個被包含的div元素的margin-left都為零，此時，視圖可見：
三個div整齊的排列在一起。好，我們修改下a的margin-left看看結果會如何。
.a{background:red;
margin-left:-100px;} ? ? ? 看圖，
很明顯，a因為margin-left為負邊距，移動到了父容器的外面。而b，c則各向左移動了100px.
我們在修改下a的margin-left大小。
.a{background:red;
margin-left:-110px;} ?
結果如圖，
b元素因為觸碰到了父元素的左邊界所以被固定在內部，注意，并沒有繼續向左移動。而，a卻又向左移動了10px.
接下來，我們把a的margin-left改回成-100px,再修改其他的。
.b{background:green;
margin-left:50px;} 結果，
可以看出，b本來是緊貼著父元素的左邊界，現在，是離左邊界50px了。（在這里，我們就應該可觀察出，a的右邊界移動出了父元素的左邊界之后，a與b,c已經不再一個浮動文檔流上了。b,c仍在一起。而b的參考線也不是a了，直接就是父元素。）
?
?
我們再來看另外一個例子：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文檔</title><style type="text/css">div{width:50px;height:50px;float:left;}.box{float:none;background:blue;width:300px;height:100px;margin-left:300px;}.a{background:red;margin-left:0px;}.b{background:black;margin-left:-150px;}.c{background:pink;margin-left:50px;}.d{background:yellow;}</style> </head><body> <div class="box"><div class="a"></div><div class="b"></div><div class="c"></div><div class="d"></div> </div> </body> </html>
?
結果如圖：
可以看見，排第三的c在b出去之后，c的參考線是以a為基準的。
也就是，我們可以得出一個結論來解決雙飛翼布局中的left元素為-100%的疑惑。
?
即： 同一方向浮動的元素本是按順序排列在視圖中的，若因為margin導致位置發生變化，那么浮動元素的margin(注意：margin方向必須與float方向相同，否則無效。)移動參考線是以離自己最近的元素(不管該元素是否浮動。)(也可以是父元素的邊界)。
?
![[轉]以終為始，詳細分析高考志愿該怎么填](http://pic.xiahunao.cn/[轉]以終為始，詳細分析高考志愿該怎么填)
)