为什么clear:both设置在父盒子中？明明是子盒子设置的浮动啊~~
如果从名字"清除浮动"上理解可能有些费解
话不多说 上定义（MDN）:

clear 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。

关于clear其余属性值请移步

<style>
  .clearfix::after{
    content: "";
    display: block;
    clear: both;
  }
  .box1{
    width: 150px;
    border: 1px solid #000;
  }

  .box2{
    width: 100px;
    height: 100px;
    background-color: lightblue;
    float: right;
  }
</style>
<body>
  <div class="box1 clearfix">
    <div class="box2"></div>
  </div>
</body>