处理高度塌陷和父子元素外边距重叠的问题

1.高度塌陷

不太了解高度塌陷的兄弟姐妹可以先看看这  https://blog.csdn.net/lw277232240/article/details/80722283 这里有讲解高度塌陷，也有解决方案

2.子父元素外边距重叠。

指的是。当子元素设置外边距的时候。父元素没有设置外边距。那么子元素设置的按个外边距。会使得两个元素一起移动。

解决方法：隔开字符元素即可。也就是在要设置外边距的元素的前面添加一个哥哥元素。使得子元素的外边距，被哥哥元素挡住了，而没有伸出去。这样就避免了重叠问题。

3.同时解决以上两个问题

为出现高度塌陷和子父元素重叠问题的父元素添加class ="cleaerfix"；

然后通过伪类选择器

.clearfix:after,.clearfix:before{

          /*在元素的前面添加一个空元素*/

              content:="";

      /*将元素转换成表格*/

            display:table；

        / *清楚浮动产生的影响*/

            clear:both;

    }

通过这样，即可同时解决两个问题