代碼如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test2</title>
<style>.header
{ width:300px; height:100px; background: green; }
.outer { width:300px; height:300px; background: yellow; }
.inner { margin-top:100px; width:100px; height:100px; background: red;}
</style>
</head>
<body>
<div class="header"></div>
<div class="outer"> <div class="inner"></div></div>
</body>
</html>
這是在做布局時的一個經(jīng)典問題。那這個問題是怎么產(chǎn)生的呢？
主要是合并margin的問題企量，紅色層（子層）的margin-top與黃色層（父層）相合并测萎，產(chǎn)生了共同的margin-top。其實合并margin還有其他的形式届巩，比如說：
父層的margin-top與一系列子層中第一個層的margin-top合并
上層的margin-bottom與下層的margin-top合并型凳，此時margin值為合并margin值中的最大值猫缭。至于負margin，就從正相鄰margin的最大值中減去負相鄰margin的絕對值的最大值。如果沒有正margin喉童，就用0減去相鄰margin的絕對值的最大值
層高為0時，自身的margin-top和margin-bottom合并
那如何解決這個問題呢全释，w3.org給出了思路：
一個浮動的盒與任何其它盒之間的margin不會合并（甚至一個浮動盒與它的流內(nèi)子級之間也不會）
建立了新的塊格式化上下文的元素（例如已骇，浮動盒與’overflow’不為’visible’的元素）的margin不會與它們的流內(nèi)子級合并
絕對定位的盒的margin不會合并（甚至與它們的流內(nèi)子級也不會）
內(nèi)聯(lián)盒的margin不會合并（甚至與它們的流內(nèi)子級也不會）
一個流內(nèi)塊級元素的bottom margin總會與它的下一個流內(nèi)塊級兄弟的top margin合并，除非兄弟有空隙
一個流內(nèi)塊級元素的top margin會與它的第一個流內(nèi)塊級子級的top margin合并方咆，如果該元素沒有top border月腋，沒有top padding并且該子級沒有空隙
一個’height’為’auto’并且’min-height’為0的流內(nèi)塊級盒的bottom margin會與它的最后一個流內(nèi)塊級子級的bottom margin合并，如果該盒沒有bottom padding并且沒有bottom border并且子級的bottom margin不與有空隙的top margin合并
盒自身的margin也會合并瓣赂，如果’min-height’屬性為0榆骚，并且既沒有top或者bottom border也沒有top或者bottom padding，并且其’height’為0或者’auto’煌集，并且不含行盒妓肢，并且其所有流內(nèi)子級的margin（如果有的話）都合并了
簡單的來講，就是
都用float來定位（有條件要求苫纤，適用范圍較廣）
為父元素添加overflow不為visiable 的屬性 （適用范圍極廣碉钠，推薦使用）
為元素添加border（一般不用）
使用絕對定位（適用范圍較窄）
父元素增加padding-top屬性（改變尺寸，不建議使用）
然而我在用margin-top的時候又發(fā)現(xiàn)一個問題： 在上一個層有clear屬性的時候margin-top不起作用卷拘，應(yīng)該還是margin合并的問題喊废，但是具體原因我沒有分析清楚，只提供幾個解決方案栗弟，供大家參考：
中間加一個層<div style=”clear:both”></div>
設(shè)置上一個層的margin-bottom來代替下一個層的margin-top
使用包裹層污筷，并設(shè)置上下層都用float:left;
使用絕對定位
全部加上border
