margin塌陷

　当两个盒子在垂直方向上设置margin值时，会出现塌陷现象

1、两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值。
2、两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值。
3、两个外边距一正一负时，折叠结果是两者的相加的和。

 

　　1.给父盒子添加border

　　2.给父盒子添加padding-top

　　3.给父盒子添加overflow:hidden

　　4.父盒子:position:fixed

　　5.父盒子:display:table

　　6.给子元素的前面添加一个兄弟元素 属性为:content:””; overflow:hidden;

　　解决方法的主要原理就是设置盒子为BFC

　　BFC为页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

原文地址：http://www.mybj123.com/2596.html