當兩個盒子在垂直方向上設定margin值時，會出現乙個有趣的塌陷現象。
①垂直並列
首先設定兩個div,並為其制定寬高
1 /*html部分*/
2 3 box1
4 box2
5 6 /*css部分*/
對box1我們為其設定margin-bottom：50px;
對box2我們為其設定margin-top： 40px;
1
我們肯定會很理所當然的認定這兩個盒子之間的距離為90px，事實上並非如此.
如下圖所示：
兩盒子之間的距離僅是50px，也就是說兩盒子之間的margin出現了重疊部分，故而我們可以得出：垂直之間塌陷的原則是以兩盒子最大的外邊距為準。
②巢狀關係(父級元素塌陷)
1 /*css部分*/
214 /*html部分*/
15 16 17
18 19
如圖示
當為子盒子新增margin-top：10px;時會發生如下情況：
子盒子和父盒子之間並沒出現期望的10px間隙而是父盒子與子盒子一起與頁面頂端產生了10px間隙（即父級盒子往下塌陷了10px）。
解決方法：
（1）為父盒子設定border，為外層新增border後父子盒子就不是真正意義上的貼合 （可以設定成透明：border：1px solid transparent）。
（2）為父盒子新增overflow：hidden；
（3）為父盒子設定padding值；
（4）為父盒子新增position：fixed；
（5）為父盒子新增 display：table；
（6）利用偽元素給子元素的前面新增乙個空元素
.son:before
關於css的margin塌陷現象
由於偶然翻到了以前的筆記，記載的正好是css的margin塌陷現象。於是有了寫在知乎上與大家分享討論的想法。在標準文件流中，豎直方向 記住是豎直方向，左右方向的不會出現塌陷現象 的margin會出現疊加現象，即較大的margin會覆蓋掉較小的margin，豎直方向的兩個盒子中間只有乙個較大的marg...
css學習筆記 解決margin塌陷問題
content 此時margin top 50px並沒有達到想要的效果，實際效果確實他會帶著他的父級元素一起向下50畫素，該現象就是margin塌陷引起的 解決辦法 1 給父元素設定border top會解決此問題 不建議使用，設定border會影響父元素的高度 2 通過bfc block form...
CSS中的BFC 與 margin塌陷
一 css中的bfc bfc 直譯為 塊級格式化上下文 他是乙個獨立的渲染區域，只有block level box參與，它規定了內部的block level box如何布局，並且與這個區域外部毫不相干。bfc布局規則 1.內部的box會在垂直方向，乙個接乙個地放置。2.bfc的區域不會與float ...