讀過李松峰老師翻譯的新書中《CSS設計師指南（第3版》的外邊距疊加部分( http://www.ituring.com.cn/article/16969)實在是有些捉急啊，這地方實在是有些沒寫到位，也有錯誤（如“疊加的只是垂直外邊距，水平外邊距不疊加”）
margin collapsing現象
BFC（block formatting context）中相鄰的兩個block-level的盒，上一個box的下邊距會跟下一個box的上邊距發生疊加，即兩者取最大的，而不是相加：
<!doctype HTML>
<html>
<head>
<style type="text/css">
#green {
margin:10px 10px 10px 10px
}
#blue {
margin:10px 10px 10px 10px
}
#red {
margin:10px 10px 10px 10px
}
</style>
</head>
<body>
<div id="green" style="background:lightgreen;height:100px;width:100px;"></div>
<div id="blue" style="background:lightblue;height:100px;width:100px;"></div>
<div id="red" style="background:pink;height:100px;width:100px;"></div>
</body>
</html>
margin collapsing與方向無關
《CSS設計師指南（第3版》中講到“疊加的只是垂直外邊距，水平外邊距不疊加”，這個說法是錯誤的，疊加與否完全取決於兩個box是否是位於同一BFC的兩個相鄰box，與水平垂直無關，下面例子中，更改了body的writing-mode，於是疊加發生在了水平方向（僅ie可看）
<!doctype HTML>
<html>
<head>
<style type="text/css">
#green {
margin:10px 10px 10px 10px
}
#blue {
margin:10px 10px 10px 10px
}
#red {
margin:10px 10px 10px 10px
}
body {
writing-mode:tb-rl;
}
</style>
</head>
<body>
<div id="green" style="background:lightgreen;height:100px;width:100px;"></div>
<div id="blue" style="background:lightblue;height:100px;width:100px;"></div>
<div id="red" style="background:pink;height:100px;width:100px;"></div>
</body>
</html>
margin collapsing僅僅發生在BFC
margin collapsing不發生在IFC
當把元素的display屬性設為inline-block，它們都位於IFC當中，所以不論水平還是豎直方向，都不會發生疊加：
<!doctype HTML> <html> <head> <style type="text/css"> #green { margin:10px 10px 10px 10px;
display:inline-block; } #blue { margin:10px 10px 10px 10px;
display:inline-block; } #red { margin:10px 10px 10px 10px;
display:inline-block; }
</style> </head> <body> <div id="green" style="background:lightgreen;height:100px;width:100px;"></div><div id="blue" style="background:lightblue;height:100px;width:100px;"></div><br/><div id="red" style="background:pink;height:100px;width:100px;"></div> </body> </html>margin collapsing不發生在floats
當把元素的float屬性設為left，它們都不在正常流中，更不在BFC中了，同樣不論水平還是豎直方向，都不會發生疊加：
<!doctype HTML> <html> <head> <style type="text/css"> #green { margin:10px 10px 10px 10px;
float:left; } #blue { margin:10px 10px 10px 10px;
float:left; } #red { margin:10px 10px 10px 10px;
clear:left;
float:left; }
</style> </head> <body> <div id="green" style="background:lightgreen;height:100px;width:100px;"></div> <div id="blue" style="background:lightblue;height:100px;width:100px;"></div>
<div id="red" style="background:pink;height:100px;width:100px;"></div> </body> </html>
margin collapsing可能跨元素
當一個容器既沒有border又沒有padding時，它的第一個子box的的margin也能跟它的上一個容器的margin發生疊加：
<!doctype HTML>
<html>
<head>
<style type="text/css">
#green {
margin:10px 10px 10px 10px;
}
#blue {
margin:5px 10px 10px 10px;
}
#red {
margin:10px 10px 10px 10px;
}
</style>
</head>
<body>
<div id="green" style="background:lightgreen;height:100px;width:100px;">
</div>
<div id="blue" style="background:lightblue;height:100px;width:100px;">
<div id="red" style="background:pink;height:100px;width:100px;"></div>
</div>
</body>
</html>
margin collapsing不能跟padding(內邊距)折疊
有padding(內邊距)的時候，上一節的情況不發生：
<!doctype HTML>
<html>
<head>
<style type="text/css">
#green {
margin:10px 10px 10px 10px;
}
#blue {
margin:10px 10px 10px 10px;
padding:10px 10px 10px 10px;
}
#red {
margin:10px 10px 10px 10px;
}
</style>
</head>
<body>
<div id="green" style="background:lightgreen;height:100px;width:100px;">
</div>
<div id="blue" style="background:lightblue;height:100px;width:100px;">
<div id="red" style="background:pink;height:100px;width:100px;"></div>
</div>
</body>
</html>
margin collapsing不能跟跨越BFC
當一個容器在其內部創建新的BFC時，跨元素折疊的情況也不會發生。
<!doctype HTML>
<html>
<head>
<style type="text/css">
#green {
margin:10px 10px 10px 10px;
}
#blue {
margin:10px 10px 10px 10px;
overflow:hidden;
}
#red {
margin:10px 10px 10px 10px;
}
</style>
</head>
<body>
<div id="green" style="background:lightgreen;height:100px;width:100px;">
</div>
<div id="blue" style="background:lightblue;height:100px;width:100px;">
<div id="red" style="background:pink;height:100px;width:100px;"></div>
</div>
</body>
</html>