margin擊穿問題（子元素的margin值作用在父元素上）
前端開發師在開發過程中經常會遇到這種問題，有時候明明設定的是子元素的margin值，結果最後卻作用在了父元素上，就像下面這個簡單的程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>margin擊穿</title>
<style>
.parent{
width:200px;
height:200px;
background: red;
}
.son{
width:100px;
height:100px;
background: blue;
margin-top:100px;
color:red;
}
</style>
</head>
<body>
<div class="parent">
<div class="son">我是兒子 </div>
</div>
</body>
</html>
我們明明只設置了子元素son的margin值，結果這個100px的margin-top卻最終卻作用在了父元素parent上，執行結果如下圖所示，這就是所謂的margin擊穿。
那麼我們應該如何解決這個問題呢？現在我主要採用兩種方式來解決（不知道還有沒有別的方式，歡迎大家補充），一種是給父元素加border,另一種就是給父元素設定overflow:auto,這兩種方式都是對父元素的操作，都可以解決問題，使margin-top不再作用於父元素上，而是正常的作用在子元素上。
需要注意的一點是，如果子元素不是div,p,h1等塊級標籤，而是a,span等行內標籤的話，則不會出現margin擊穿問題。此外，如果父元素和子元素之間還有別的內容，即html程式碼如下所示的話也不會導致margin擊穿問題。
<body>
<div class="parent">
我是父親
<div class="son">我是兒子 </div>
</div>
</body>