清除浮动的三种方法

1. （推荐）通过添加伪类元素after

    ul{
      border: 1px solid saddlebrown;
    }
    ul:after{
      content: '';
      display: block;
      clear: both;
    }
    li{
      float: left;
      margin-right: 10px;
      list-style: none;
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    
   <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>

2. 通过触发BFC可以变相的清除掉浮动。给父级添加overflow: hidden

  ul{
      border: 1px solid saddlebrown;
      overflow: hidden; // 触发BFC
    }
    li{
      float: left;
      margin-right: 10px;
      list-style: none;
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
    </ul>

3. （不推荐）通过额外标签法：在浮动元素平级的最后面添加额外元素。但缺点是会造成产生额外 无用的标签。

    ul{
       border: 1px solid saddlebrown;
    }
    li{
      float: left;
      margin-right: 10px;
      list-style: none;
      width: 100px;
      height: 100px;
      background-color: pink;
    }
    .box{
      clear: both;
    }
    
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <div class="box"></div>
  </ul>