其實關於這個問題，老生常談了。在這裡說說因僅僅是因為想更加深刻的理解一下。
lang="en">
charset="utf-8">
documenttitle>
head>
* .box
.d1.d2
style>
class="box">
class="d1">
class="d2">
div>
div>
div>
body>
html>為了看到效果。我把div1和div2放在了紅色的box裡面。便於觀察。現在我們看一下展示的效果。
我們給藍色背景的div加了margin-top:10px;但是卻並沒有把藍色背景的div向下移動。而是使得他的父元素的紅色的div向下移動了10px.那是什麼原因呢。
原因根據w3c盒子模型的規範，乙個盒子如果沒有上補白(padding-top)和上邊框(border-top)，那麼這個盒子的上邊距會和其內部文件流中的第乙個子元素的上邊距重疊。
解決：
方法一：給父元素加乙個border值一般都是設定為border:1px solid transprent; 但是新增了乙個邊框邊緣會有一些空白。
方法二：給父元素新增乙個overflow：hidden; 可能會將需要溢位的元素隱藏起來。
方法三：將margin-top改為padding-top；有的時候這種效果並非我們所需要的。
方法四：利用偽類：before 我們這裡解決問題的方式借鑑解決浮動的問題的方式。寫乙個類把這個類新增給父元素。
.clearfix
.clearfix
/*ie/7/6*/
解決問題的方式有很多種。主要看哪種適合自己網頁裡面的具體情況。
CSS中margin top屬性失效問題解決
文章出處 css屬性有很多值得學習的地方，你對css中margin top屬性失效的解決方法是否熟悉，這裡和大家分享一下，相信通過本文的介紹你對margin top屬性失效的解決方法一定會有深刻的認識。關於margin top屬性失效的解決方法 常出現兩種情況 一 margin top失效 先看下面...
margin top失效的解決方法
異常處理彙總 前端系列 我的是屬於這種情況 按照網上的說法，我就是這個現象了 兩個層box1和box2，box1具有浮動屬性，box2沒有，這時候設定box2的上邊距margin top沒有效果。這是網上的解決方法 並不適用我的情況 本文向大家描述一下margin top失效的解決方法，margin...
margin top失效的解決方法
異常處理彙總 前端系列 我的是屬於這種情況 按照網上的說法，我就是這個現象了 兩個層box1和box2，box1具有浮動屬性，box2沒有，這時候設定box2的上邊距margin top沒有效果。這是網上的解決方法 並不適用我的情況 本文向大家描述一下margin top失效的解決方法，margin...