为避免子元素浮动带来的父元素高度塌陷，和调整子元素的上边距带来的父元素同步移位问题，实现方式为通过添加.clearfix::before,.clearfix::after来实现
子元素浮动后，脱离了文档流，导致父元素无撑起其高度的子元素，此时如果再创建一个非浮动的子元素，那么父元素的高度即可被撑起。然后通过将新创建的子元素添加clear:both，来自动添加等于其浮起的兄弟元素最大高度的margin-top；这一切通过在父元素中添加伪元素的方式实现，但是伪元素创建的元素，默认为行内元素，需要将其转变为display:table，既可以解决高度塌陷问题，也可以解决调整子元素的上边距带来的父元素同步移位问题，而新添加的元素只是为了撑起父元素或解决同步移位，无需添加内容，所以设置其content:“”，因为css为解决样式方面的问题，而HTML为解决结构问题，所以通过.clearfix::before,.clearfix::after解决以上问题，并不会为HTML中的元素添加多余代码
在需要解决问题的父类元素中添加
.clearfix::before,.clearfix::after{
content:"";
display:table;
clear:both;
}
