四种方法清除float第一种：overflow:hidden第二种：添加div类名为clear第三种给大盒子设置clea

第一种：overflow:hidden

<div class="box">
    <div class ="son1"><div>
    <div class ="son2"><div>
<div>
<div class= "box2"></div>

.box {
    height:auto;
    overflow:hidden;
    width:200px;
    background-color:red;
}
.son {
    height:40px;
    width:50px;
    float:left;
    background-color:pink;
}
.son2 {
    height:40px;
    width:50px;
    float:right;
    background-color:yellow;
}
.box2{
    height:200px;
    width:200px;
    background-color:blue;
}

第二种：添加div 类名为clear

.clear {
    clear: both;
}

<body>
    <div class="box">
        <div class="son1"></div>
        <div class="son2"></div>
        <div class="clear"></div>
    </div>
    <div class="box2"></div>
</body>

第三种给大盒子设置clearfix类名

.clearfix:after {
    content: ""; 设置内容为空
    height: 0;   高度为0
    display: block; 转为块级
    visibility: hidden; 隐藏
    clear: both; 清楚左右浮动
}
.clearfix {
    zoom: 1;
}

第四种 clearfix

.clearfix:before,.clearfix:after {
    content:"";
    display:table;
}
.clearfix:after {
    clear:both;
}
.clearfix {
    zoom:1;
}