版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
div的常见三种清除浮动的方式
1.用父容器的高度来解决清除浮动问题
###代码举例
<body>
<div id="wraper">
<div class="box floatleft"></div>
<div class="box floatright"></div>
</div>
</body>
<style>
#wraper{
width: 300px;
height: 300px;
margin: 0 auto;
border: 1px solid black;
}
.box{
height: 100px;
width: 100px;
border: 2px solid red;
}
.floatleft{
float: left;
}
.floatright{
float: right;
}
</style
效果如下图：
2.用多余的标签来解决清除浮动问题
###代码举例
<body>
<div id="wraper">
<div class="box floatleft"></div>
<div class="box floatright"></div>
<!-- 清除浮动：兼容所有浏览器；性能最好 -->
<div class="clearFloat"></div>
</div>
</body>
<style>
#wraper{
width: 300px;
margin: 0 auto;
border: 1px solid black;
}
.box{
height: 100px;
width: 100px;
border: 2px solid red;
}
.floatleft{
float: left;
}
.floatright{
float: right;
}
.clearFloat{
clear: both;
}
</style
效果如下图：
3.用伪类来解决清除浮动问题
###代码举例
<body>
<div id="wraper clearFloat">
<div class="box floatleft"></div>
<div class="box floatright"></div>
</div>
</body>
<style>
#wraper{
width: 300px;
margin: 0 auto;
border: 1px solid black;
}
.box{
height: 100px;
width: 100px;
border: 2px solid red;
}
.floatleft{
float: left;
}
.floatright{
float: right;
}
.clearFloat::after{
content: '';
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFloat{
zoom: 1;
}
</style
产生的效果与效果图2一样，没有区别
4.总结
这里介绍了我用的比较多的三种方式来清理浮动，可以根据自己的喜好和项目的规定来选择清除浮动的方式。对于这三种方法给出一些建议：
1.第一种方式我用的比较多的地方就是用来给导航条添加浮动，左一块、右一块，只要加一个高度就可以实现，但是要根据自己的需求，如果可以用弹性布局也可以就不用浮动了，还是得看情况。
2.第二种方式兼容性比较好，推荐用，我们的项目还是得通过不同的浏览器去调试，个人推荐，并且代码量也是很少，只是会增加没有用的标签。
3.第三种方式虽然代码比较多，但是它不用添加无用标签，也不用给父容器设置高度，也还算不错，可以根据自身选择。
以上就是这三种方法的简单介绍，希望能帮到各位。