CSS外边距折叠与高度塌陷问题

一. CSS外边距折叠问题

在CSS垂直布局中，相邻方向的垂直外边距会发生重叠现象。
垂直外边距折叠问题分2种情况：

• 兄弟元素

在相邻兄弟元素的垂直外边距中，当发生重叠时，会取两者之间的较大值。

该现象可以避免两个元素间的距离过大，在实际开发中通常是有利的，无需处理。

eg: 元素A margin-bottom:100px; 相邻兄弟元素B marigin-top:200px; 则元素A与B间的外边距为200px。

*如果兄弟元素的垂直外边距一正一负，则取两者之和；如果均为负值，则取两者绝对值较大的值。

• 父子元素

在父子元素中的相邻外边距中，如果父元素没有设置任何内边距/边框值，那么设置子元素的垂直上外边距时会传递至父元素。

该现象会影响到页面的布局，因此需要进行处理。

       eg: html为根元素，div为父元素，p为div的子元素
       
        html{
            border:1px solid red;
        }
        div {
            width: 200px;
            height: 200px;
            background-color: yellow;
        }
        p {
            margin-top: 100px;
        }

结果：

处理方案：

1. 不设置子元素的外边距；
2. 设置父元素的内边距/边框值，使子元素和父元素的上外边距不相邻（在标准页面布局中需注意按要求修改对应内容区width/height值）；
3. 设置父元素的overflow属性，属性值非visible；—开启BFC
4. 通过给父元素设置::before伪元素； div::before{content:'';display:table;}

二. CSS高度塌陷问题

在默认情况下，当父元素未设置高度height时，会自动被子元素的内容撑开；但当设置子元素为浮动后，由于浮动会使子元素完全脱离文档流，导致无法撑起父元素，父元素高度丢失，即CSS高度塌陷问题。

该现象会导致父元素下的元素自动上移，影响页面布局，所以需要进行处理。

  eg: div为父元素，p为div的子元素
     div {
            background-color: yellow;
            border:1px solid red;
        }
      p {
            float:left;
        }

结果：

处理方案：

• 设置父元素高度;
• 设置父元素的overflow属性，属性值非visible，使其可以包含浮动的子元素；—开启BFC
• 通过给父元素设置::after伪元素；
  div::after{content:'';display:block;clear:both;}

总结：clearfix样式

既解决CSS父子元素的外边距折叠问题，又解决了CSS高度塌陷问题。

.clearfix::before,.clearfix::after{
content:’’;
display:table;
clear:both;
}