通常大家在制作網頁的過程中會遇到很多棘手的問題，比如我在寫一個頁面的時候，遇到了div嵌套引起的margin-top不起作用，對內部的div設置margin-top時，內部對於外部的div並沒有產生一個margin值，而是外部的div相對於上面的div產生了一個margin值，為什么會出現這種情況？？？
這是因為嵌套div中margin-top出現轉移，在部分瀏覽器中，兩個嵌套的div，如果外層父元素div的padding值為0，那么內層div的margin-top，margin-bottom值都會轉移到父元素也就是外層div身上。
<head>
<title></title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.div1{
height: 500px;
width: 100%;
background: #ccc;
}
.div2{
height: 100px;
width: 100px;
background: red;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
由代碼可看出，div1嵌套div2，對div2設置margin-top是100px；
可看出，div1 上方留的空白正是我們對div2設置的margin值
解決辦法：
1.給父元素div1設置一個padding值
.div1{
height: 500px;
width: 100%;
background: #ccc;
padding-top: 1px;
}
2.給父元素div1設置一個overflow：hidden；在不加overflow:Hidden;的時候，margin-top:這個屬性是認不到邊的，也就是失效。但是ie瀏覽器解決了這個問題，火狐、谷歌之類的就會出現失效，所以這是個標准問題，也是個兼容問題。
.div1{
height: 500px;
width: 100%;
background: #ccc;
overflow: hidden;
}
3.把外邊距margin改為padding，由於這樣做撐大了盒子的高度，會出現如圖效果，所以不建議使用。
4.讓父元素生成一個塊級格式化范圍（BFC）（關於BFC：http://blog.sina.com.cn/s/blog_48422a050100tkig.html）
給子元素div2加：
float: left/right
position: absolute
display: inline-block/table-cell(或其他 table 類型)
overflow: hidden/auto
給父層div1加：position: absolute;