点击上方 "前端技术精选"关注，星标或者置顶
12点00分准时推送，第一时间送达
前端技术精选(ID：FrontEndTech)第 55 次推文图源：百度上一篇：16个非常有用的CSS伪选择器，你千万不要错过了！作者：html中文网| 编辑：前端妹
来源：/web/css/19613.html
往期最热：
1、万字长文！if我是前端团队Leader，怎么制定前端协作规范？
2、Vue + Koa从零打造一个H5页面可视化编辑器——Quark-h5
3、高阶函数不会用？教你JS中最实用最牛掰的几个高阶函数用法
4、大前端发展趋势
5、美团旅行前端技术体系的思考与实践
6、技巧：CSS实现一个粒子动效的按钮
7、腾讯高级工程师：未来可期的TypeScript
正文
今天这篇文章给大家介绍3种CSS清除浮动的方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。首先，这里就不讲为什么我们要清楚浮动，反正不清除浮动事多多。下面我就讲3种常用清除浮动的方法，够用了。1、在浮动元素后面加一个空的div，并为它清除浮动html代码：
class="wrap">class="float">浮动class="clear">class="nofloat">不想被浮动影响
.wrap{width:500px;height:400px;border:1px solid red;margin:0 auto;}.float{width:200px;height:200px;background:#ccc;float:left;}.nofloat{width:300px;height:150px;background:red;}
现在虽然加了一个空的div，但是并没有给它清除浮动，所以目前的效果就是第三个子元素.nofloat还是收到浮动的影响。OK，现在给.clear加上清除浮动：
.clear{clear:both;}
刷新一下效果就出来了：PS：这种情况比较适合元素之间是垂直排列布局的，为了不受彼此浮动的影响。2、利用BFC特性清除浮动html代码：
class="wrap">class="float">浮动class="nofloat">不想被浮动影响
.wrap{width:500px;border:1px solid red;margin:0 auto;overflow:hidden;}.float{width:200px;height:200px;background:#ccc;float:left;}.nofloat{width:300px;height:150px;background:red;overflow:hidden;}
效果是这样的：这里父容器是没有设置固定高度的，本来第一个子元素浮动之后，父元素的高度会塌陷到跟第二个子元素一样高，但由于这里分别给第二个子元素和父元素都设置了overflow:hidden ，所以它们都生成了一个新的BFC区域，根据上文提供的BFC布局规则可以得知：BFC区域不会与float box 重叠；计算BFC高度时浮动元素的高度也参与计算。所以就得到清除浮动的效果。说得比较绕，但其实清除浮动得根据自己开发中的实际情况合理使用。3、使用：after伪元素，给浮动元素的父元素清除浮动html代码：
class="wrap"><div class="float">浮动div></div>css代码：
.wrap{width:500px;border:1px solid red;margin:0 auto;}.float{width:200px;height:200px;background:#ccc;float:left;}
此时子元素浮动了，脱离了文档流，所以父元素高度酒塌陷了：
可以看到父元素的边框挤在一起了。OK，现在给父元素添加一个clearfix类：
class="wrap clearfix"><div class="float">浮动div></div>
.clearfix{*zoom:1;}.clearfix:after{content:'clear';display:block;height:0;clear:both;overflow:hidden;visibility:hidden;}
现在刷新后的效果就是：
这种方法和BFC清除浮动个人用的比较多，实际开发中，其实这两种就够用了。好的，清除浮动我也就简单地提到这里！以上就是CSS清除浮动的几种方法的详细内容。如果有什么错误的话，欢迎留言指正。
前端妹拍了拍你说：
记得戳小花花哦~
历史回顾：JavaScript常用API合集汇总三年 Git 使用心得 & 常见问题整理字节跳动禁止中国员工访问海外代码库；新Mac或使用苹果自研芯片；微软公布Windows Terminal 2.0路线图何时使用TypeScript：常见场景的详细介绍纯CSS打造银色MacBook Air(完整版) 年 6 月编程语言排行榜前端开发与架构师微信又升级!这个功能被“玩坏”,网友笑抽了...
喜欢本文的朋友们，欢迎长按下图关注订阅号前端技术精选
收看更多精彩内容
你在看吗？一起成长
