代碼如下：
<!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>
這是在做布局時(shí)的一個(gè)經(jīng)典問題。那這個(gè)問題是怎么產(chǎn)生的呢？
主要是合并margin的問題，紅色層（子層）的margin-top與黃色層（父層）相合并，產(chǎn)生了共同的margin-top。其實(shí)合并margin還有其他的形式，比如說：
父層的margin-top與一系列子層中第一個(gè)層的margin-top合并
上層的margin-bottom與下層的margin-top合并，此時(shí)margin值為合并margin值中的最大值。至于負(fù)margin，就從正相鄰margin的最大值中減去負(fù)相鄰margin的絕對(duì)值的最大值。如果沒有正margin，就用0減去相鄰margin的絕對(duì)值的最大值
層高為0時(shí)，自身的margin-top和margin-bottom合并
那如何解決這個(gè)問題呢，w3.org給出了思路：
一個(gè)浮動(dòng)的盒與任何其它盒之間的margin不會(huì)合并（甚至一個(gè)浮動(dòng)盒與它的流內(nèi)子級(jí)之間也不會(huì)）
建立了新的塊格式化上下文的元素（例如，浮動(dòng)盒與’overflow’不為’visible’的元素）的margin不會(huì)與它們的流內(nèi)子級(jí)合并
絕對(duì)定位的盒的margin不會(huì)合并（甚至與它們的流內(nèi)子級(jí)也不會(huì)）
內(nèi)聯(lián)盒的margin不會(huì)合并（甚至與它們的流內(nèi)子級(jí)也不會(huì)）
一個(gè)流內(nèi)塊級(jí)元素的bottom margin總會(huì)與它的下一個(gè)流內(nèi)塊級(jí)兄弟的top margin合并，除非兄弟有空隙
一個(gè)流內(nèi)塊級(jí)元素的top margin會(huì)與它的第一個(gè)流內(nèi)塊級(jí)子級(jí)的top margin合并，如果該元素沒有top border，沒有top padding并且該子級(jí)沒有空隙
一個(gè)’height’為’auto’并且’min-height’為0的流內(nèi)塊級(jí)盒的bottom margin會(huì)與它的最后一個(gè)流內(nèi)塊級(jí)子級(jí)的bottom margin合并，如果該盒沒有bottom padding并且沒有bottom border并且子級(jí)的bottom margin不與有空隙的top margin合并
盒自身的margin也會(huì)合并，如果’min-height’屬性為0，并且既沒有top或者bottom border也沒有top或者bottom padding，并且其’height’為0或者’auto’，并且不含行盒，并且其所有流內(nèi)子級(jí)的margin（如果有的話）都合并了
簡(jiǎn)單的來講，就是
都用float來定位（有條件要求，適用范圍較廣）
為父元素添加overflow不為visiable 的屬性 （適用范圍極廣，推薦使用）
為元素添加border（一般不用）
使用絕對(duì)定位（適用范圍較窄）
父元素增加padding-top屬性（改變尺寸，不建議使用）
然而我在用margin-top的時(shí)候又發(fā)現(xiàn)一個(gè)問題： 在上一個(gè)層有clear屬性的時(shí)候margin-top不起作用，應(yīng)該還是margin合并的問題，但是具體原因我沒有分析清楚，只提供幾個(gè)解決方案，供大家參考：
中間加一個(gè)層<div style=”clear:both”></div>
設(shè)置上一個(gè)層的margin-bottom來代替下一個(gè)層的margin-top
使用包裹層，并設(shè)置上下層都用float:left;
使用絕對(duì)定位
全部加上border
