为什么不直接使用clear:both

为什么clear:both不起作用？

首先：

clear属性只是在block元素是起作用，如果你把clear:both用在一个inline-block或inline元素上，clear:both是不会起任何作用的。

解决方法：

参考1：利用伪类进行清除浮动

.clearfix:after {
  clear:both;
  content:".";
  display:block;
  height:0;
  line-height:0;
  visibility:hidden;
}

参考2：

        .clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

注：这里的table的作用是实现在一行中。