寫于2017-07-11，但是發(fā)現(xiàn)簡(jiǎn)書比個(gè)人網(wǎng)站省力氣得多，遂搬家至此券敌；
有這么一段代碼
<style type="text/css">
*{
margin: 0;
}
.out{
width: 200px;
height: 200px;
background: paleturquoise;
}
.in{
width: 100px;
height: 50px;
margin: 30px auto;
background: pink;
}
</style>
<body>
<div class="out">
<div class="in"></div>
</div>
</body>
它本來應(yīng)該是醬嬸兒的 ↓
image.png
結(jié)果 卻是醬嬸兒的(黑人問號(hào).jpg)...
image.png
嵌套的兩個(gè)div。本該是子div距離父div上邊 30px的距離的柳洋，現(xiàn)在卻是父div隨著子div走了30px待诅，兩個(gè)上邊重疊了；
兩個(gè)垂直相鄰的邊距 沒有任何真實(shí)東西填充以分隔二者熊镣，于是外邊距合并了卑雁，此之謂邊距塌陷；
總之就是兩個(gè)盒子的垂直外邊距或者 绪囱，垂直方向的兩條邊距接觸了不一定非得兩個(gè)盒子完全接觸才會(huì)形成 這種塌陷测蹲；
塌陷只存在與相鄰的垂直外邊距，即只涉及到margin-top/bottom鬼吵，水平（margin-left/rignt無）
知道問題所在了 扣甲，就拿東西去填充分隔它們。比如padding 和 border齿椅；
網(wǎng)上還有一種說法就是 讓其中一個(gè)脫離文檔流琉挖，親測(cè)可行。即absolute 和float涣脚；
最后一種 給父div加溢出的css overflow示辈，親測(cè)也可行，但不太理解其中原理遣蚀；
在我看來 overflow:hidden;是一個(gè)總能在特殊時(shí)刻解決問題的東西矾麻；
overflow: hidden; 其實(shí)就是觸發(fā)了 BFC，感謝簡(jiǎn)書小伙伴的提醒芭梯；
通過各方搜索险耀，匯總出如下方案----給父元素加如下樣式；
border:1px solid transparent;padding:1px;float:left/rightposition:absolutedisplay:inline-blockoverflow:hidden/auto
最后再附上參考demo
版權(quán)聲明：本文原創(chuàng)玖喘，轉(zhuǎn)載請(qǐng)注明出處 http://www.reibang.com/p/7f570ee72c85
