首先來(lái)看一個(gè)案例：
.bottom-box{
margin-top:30px;
}
我設(shè)置了margin-top屬性，我的上邊距應(yīng)該距離父元素為30px;
可是結(jié)果如何呢掖棉？結(jié)果并不是class為bottom-box的div上邊距離父元素30px;而是距離body元素30px;
什么原因呢默伍？
當(dāng)個(gè)子元素設(shè)置margin-top屬性時(shí)箩朴，如何父元素沒(méi)有設(shè)置padding屬性，即padding屬性為0朴上，那么會(huì)出現(xiàn)以上這個(gè)情況传藏。
解決辦法：這里有四種解決辦法
給父元素加上css樣式：overflow:hidden
給父元素加上css樣式：padding-top，其值只要不是0都可以
給父元素加上css樣式：position: absolute
把對(duì)父容器的margin-top外邊距改成padding-top內(nèi)邊距讥珍。
再來(lái)看一個(gè)實(shí)例：
http://www.manongjc.com/article/1263.html
#box{width:600px; background:#E6FECB; border:3px solid #933; overflow:hidden;}
.float_div{float:left; margin:20px; width:100px; height:100px; display:inline; background-color:#CCC;}
其在IE6和IE7下顯示效果為
margin:20px; 只有margin-bottom失效了历极。
解決辦法：只要在浮動(dòng)的最后一個(gè)元素后面加上“
box{width:600px; background:#E6FECB; border:3px solid #933; overflow:hidden;}
.float_div{float:left; margin:20px; width:100px; height:100px; display:inline; background-color:#CCC;}
.clear{clear:both;}
還有個(gè)簡(jiǎn)單點(diǎn)的解決方法：
IE6/7下margin-bottom無(wú)效一般出現(xiàn)在容器里某元素設(shè)置后在父容器內(nèi)無(wú)效窄瘟，這個(gè)時(shí)候只需要在父容器中加入以下兩句css，基本上所有的瀏覽器都兼容了：
overflow:hidden;zoom:100%;
這個(gè)方法不用添加額外的標(biāo)簽趟卸，也是很好的解決辦法蹄葱！
