消除浮动的几种常用方法

    
 
 
 
     *{
  margin: 0;
  padding: 0;
     }
     .box{
  width: 300px;
  background-color: red;
  margin: 20px auto;
  padding: 20px;

     }
     .box div{
  width: 80px;
  height: 80px;
  float: left;
     }
     .clearfloat::after{
  content: '';
  clear: both;
  display: block;
     }
 
    
    
 
     
     
     
 
    

1：给父元素加上display: flex
2：给父元素加上overflow: auto||hidden
3：给父元素加上名为clearfloat的class
以上三种方法均可达到消除浮动的效果