外间距塌陷问题

并列关系，兄弟关系 兄弟关系外间距塌陷问题

现象：元素呈并列关系，在垂直方向相邻的margin外间距相遇，会出现叠加现象；

两个值一样大，取当前值 两个值不同，取较大值

原因：并列关系的两个元素共用了一个外间距区域

解决办法： 分别给这两个元素套一个父元素，并为父元素设置overflow:'hidden'

1.当子元素设置上外间距的，此时子元素与父元素不会产生上外间距，上外间距会叠加给父元素

2.当子元素和父元素都有上外间距时，

原因： 父元素和子元素公用一个上外边距区域，子元素与父元素还是不会产生上外间距，

此时父元素的上外间距的取值： 子元素与父元素上外间距的值一样大，取当前值

子元素与父元素上外间距的值不一样大，取最大值

解决方法：

1.给父元素设置overflow：hidden

2.给父元素设置上内填充或者上边框

3.规避margin,巧用padding .wrap { width: 400px; height: 400px; background-color: tomato;

 1.给父元素设置overflow：hidden / overflow: hidden;

 2.给父元素设置上内填充或者上边框 

溢出隐藏 /overflow: hidden;

 溢出显示 默认值 / overflow: visible;

溢出显示滚动条 不管有没有溢出，都会显示滚动条/overflow: scroll;

 溢出自动 自动识别计算  overflow: auto;

水平方向的溢出情况

溢出显示 overflow-x: visible;

溢出隐藏  overflow-x: hidden;

溢出scroll overflow-x: scroll;

溢出auto overflow-x: auto;

垂直方向的溢出情况 overflow-y: hidden;

overflow-y: scroll;

overflow-y: visible;

overflow-y: auto;