清除浮动的方法

1.定高法 ：给父级容器添加高度

<style>
.contain{
    width: 500px;
    /* 给父级容器添加高 */
    height: 500px;   
    border: 1px solid #000;
}
.box{
    width: 300px;
    height: 300px;
    background-color: red;
    float: left;
}
</style>
    

<div class="contain">
<div class="box"></div>
</div>

2.额外标签法：在浮动元素的后边添加一个块级标签，这个标签专门clear:both

<style>
.contain{
    width: 500px;
    border: 1px solid #000;
}
.box{
    width: 300px;
    height: 300px;
    background-color: red;
    float: left;
}
.clear{
    clear: both;
}
</style>
    

<div class="contain">
<div class="box"></div>
<div class="clear"></div>
</div>

 3.伪元素清除浮动

<style>

.contain{

    width: 500px;

    border: 1px solid #000;

}

.box{

    width: 300px;

    height: 300px;

    background-color: red;

    float: left;

}

.clearfix:after{

    content:'';

    clear: both;

    display: block;

    height: 0;

    visibility: hidden;

}

.clearfix{

    *zoom: 1;

}

</style>

    

 

<div class="contain clearfix">

<div class="box"></div>

</div>