設計頁面的時候遇到一個神奇的問題，下面是html的代碼
<body>
<div class="homeNav">
<div class="homeCategory ">
</div>
</div>
</body>
此時我設定子容器homeCategory的樣式：
.homeCategory{
margin-top:30px;
}
發現margin相對的父容器搞錯了，找到body去了，成了相對於body來設定margin，此時設定了homeNav 的高度和寬度都沒效果，讓我抓狂不已，div都不聽話了，調試了半天終於找到了原因。
原因：
在兩個嵌套的div，如果外層div的父容器padding值為0，
那麼內層div的margin-top或者margin-bottom的值會”轉移”給外層div，也就是父容器的父容器。
解決辦法：
1：設定父容器的的樣式加上：overflow:hidden。
2：把對父容器的margin-top外邊距改成padding-top內邊距。
3：給父容器div加樣式， padding-top: 1px。
4：給父容器div加樣式，position: absolute。
5：把父元素變成一個 block formating context ，下面是可選的方法
a、float: left/right
b、position: absolute
c、display: inline-block/table-cell
d、overflow: hidden/auto
我自己使用的是第一種方法，建議方法1。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
