在寫網頁的過程中經常會遇到一些問題，往往都是些很小的問題 但是卻會使頁面的整個布局都崩潰。 特別是在使用浮動和絕對定位的時候。浮動帶來的高度塌陷，以及絕對定位元素達不到預期的效果。
所以在寫頁面的過程中最好是寫一點看一下效果；
問題：父元素裡有塊元素，如果給子元素新增margin-top，父元素會下來。
我們想要的效果是子元素距離距離父元素的上邊有10px的距離
解決這種問題有很多種方法，所以需要在面對不同得前提下選中乙個最優的解決方法
1：給父元素新增overflow：hidden；
2：給子元素新增float；
3：給父元素加邊框；
4：給父元素加padding-top；
上面的四種方法都可以實現但是 有的是有缺陷
第一種 給父元素新增
但是我可以看到通過絕對定位的紅色方塊 超出的部分被隱藏了，所以這個方法不並不是當前最優的解決辦法
第二種 ：給子元素新增float；
藍色的方塊是達到我們想要的 並且紅色的方塊超出的部分沒有被隱藏，但是黃色的跑到最定上去了，因為藍色的浮動了脫落了文件流，所以黃色就自動向上移動了
第三種 ：給父元素加邊框；
這個也達到我們想要的效果只是多了乙個邊框 我們可以通過改變邊框的顏色變成透明色
但是仔細看還是有一點小的差別
第四種：給父元素加padding-top；
邊距加上了 父元素的padding 以及子元素的margin 所以需要去掉子元素上的margin；
同時該盒子模型是標準盒子模型 加上 padding 會讓父元素盒子被撐大 所以需要重新計算父元素盒子的高度，或則使父元素盒子變成怪異盒子模型（ie盒子）
這個方法達到的是比其他的幾種的達到的效果是最好的但是需要注意的地方也是有的。
解決問題的方法永遠不只一種，但是要從中找到最後符合當卻要找到最符合當前需求的方法
margin top影響父元素定位
寫樣式時無意中發現margin top會影響到父元素的定位，下面是示例 html div class demo div class inner 子元素 div div css demo.inner效果如下 如上圖所示 在子元素設定了margin top 30px時，父元素會掉落30px,而子元素和父...
margin top對於父元素的影響
案例問題 子元素設定的margin top沒有起作用,還是定在頂到了父元素的邊緣！並且影響父元素移動 案例 body father son style father son div div 效果如下 分析 垂直外邊距合併問題常見於第乙個子元素的margin top會頂開父元素與父元素相鄰元素的間距，...
關於子元素的margin top影響父元素
來看看這個問題 子元素為什麼設定margin top會影響父元素的margin top。先把html,body,div的預設margin，padding設為0,再給父元素設定寬高，子元素設定寬高。然後又設定子元素的margin top為20px。效果如下 查了下，簡單來說是因為父元素沒有設定padd...