高度塌陷与垂直外边距重叠的解决方式

高度塌陷

意思是：文档流中父元素高度默认被子元素撑开，但子元素设置浮动以后，就会脱离文档流，导致子元素无法撑起父元素高度，父元素则会高度塌陷，父元素下的所有元素都会向上移动，导致页面布局混乱
解决方式：
1.为将元素的over-flow设置为一个非visible（默认）的值 over-flow：hidden；（元素内有相对定位时容易出问题）

2.在高度塌陷的父元素最后添加一个空白div，这个div并没有浮动,所以可以撑开父元素高度，然后此div进行清除浮动，达到效果clear：both/left/right；（副作用几乎没有，但是会添加多余结构）

3.通过after伪类通过after伪类，选中父元素最后边添加空白内容，然后转化为块元素使用该空白块元素清除浮动

 .n:after{  /*.n可以是一个通用值*/
      	   content："";/*添加空白内容*/
           display：block;/*转化为块元素*/
           clear:both;/*清除浮动*/
                                }

垂直外边距重叠

解决方式：

.n:before{
          content="";
          display:table;
          clear:both;
}

同时解决高度塌陷和垂直外边距重叠

.n:before, .n:after{
            content="";
            display:table;
            clear:both;
}