解决外边距塌陷(margin collapse)的对策汇总

写于2017-07-11，但是发现比个人网站省力气得多，遂搬家至此；

有这么一段代码

它本来应该是酱婶儿的 ↓

image.png

结果 却是酱婶儿的(黑人问号.jpg)...

image.png

嵌套的两个div。本该是子div距离父div上边 30px的距离的，现在却是父div随着子div走了30px，两个上边重叠了；
两个垂直相邻的边距 没有任何真实东西填充以分隔二者，于是外边距合并了，此之谓边距塌陷；
总之就是两个盒子的垂直外边距或者 ，垂直方向的两条边距接触了不一定非得两个盒子完全接触才会形成 这种塌陷；

塌陷只存在与相邻的垂直外边距，即只涉及到margin-top/bottom，水平（margin-left/rignt无）

知道问题所在了 ，就拿东西去填充分隔它们。比如padding 和 border；
网上还有一种说法就是 让其中一个脱离文档流，亲测可行。即absolute 和float；
最后一种 给父div加溢出的css overflow，亲测也可行，但不太理解其中原理；
在我看来 overflow:hidden;是一个总能在特殊时刻解决问题的东西；
overflow: hidden; 其实就是触发了 BFC，感谢小伙伴的提醒；
通过各方搜索，汇总出如下方案----给父元素加如下样式；

• border:1px solid transparent;
• padding:1px;
• float:left/right
• position:absolute
• display:inline-block
• overflow:hidden/auto

最后再附上参考demo

版权声明：本文原创，转载请注明出处 https://www.jianshu.com/p/7f570ee72c85