解决元素塌陷，清除浮动

一、什么是元素塌陷

再给子元素添加了浮动之后，它的父元素通常高度会变为0，这就导致元素整体“走位”，这就叫做元素塌陷。

二、解决方法：清除浮动

要解决元素塌陷问题很简单，可以给添加了浮动的父元素添加一个伪元素::after

::after {
      clear: both;
      display: block;
      content: '';
   }

为了方便使用，我们可以把这段代码简单封装成一个类，这样子只要用这个类就能清除浮动了

比如我们新建一个名为clearfix的类，单独放在clear.less文件中

.clearfix {
   &::after {
      clear: both;
      display: block;
      content: '';
   }
}

在主样式表中导入

@import 'mixins/clear.less';

父元素中直接调用一下

父元素{
    width:40px
    ....

    .clear
  
    子元素{
        float:left
        ....
    }
    子元素{
        float:right
        ...
    }
}

这样子就能解决浮动塌陷的问题