如何清除float浮动？这里盘点三种实用的方法

第一种方法：

通过给浮动元素后添加一个div空标签，通过CSS添加一个clear属性。

<style>
.content1 {
    width:200px;
    float:left
}
.content2 {
    width:200px;
    float:left
}
.content3 {
    width:200px;
    float:left
}
.clear {
    clear:both;
}
</style>
<div class="content1"></div>
<div class="content2"></div>
<div class="content3"></div>
<div class="clear"></div>

第二种方法：

通过给浮动元素的父元素添加一个overflow:hidden属性。

<style>
.content {
    width:500px;
    overflow:hidden;
    zoom:1;  /*兼容IE*/
}
.left {
    width:300px;
    float:left;
}
.right {
    width:200px;
    float:right;
}
</style>
<div class="content">
    <div class="left"></div>
    <div class="right"></div>
</div>

第三种方法（推荐）：

通过CSS3的after伪元素清除浮动。

<style>
.content {
    width:500px;
}
.clearfix:after {
    content:'.';
    height:0;
    display:block;
    visibility:hidden;
    clear:both;
}
.clearfix {
    zoom:1; /*兼容IE*/
}
.box1 {
    width:200px;
    float:left;
}
.box2 {
    width:200px;
    float:left;
}
.box3 {
    width:100px;
    float:left;
}
</style>
<div class="content clearfix">
    <div class="box1">盒子1</div>
    <div class="box2">盒子2</div>
    <div class="box3">盒子3</div>
</div>

👋 感谢您的观看！