个人比较喜欢这种清除浮动的写法。因为不用再添加一个标签来写入样式直接写在大容器里面就可以了。但是有前提是里面的子元素要是浮动的。如果有的浮动有的不浮动建议还是在最后面添加标签来添加清楚样式。
一、<div class="main clearfix"><div class="fl">左边</div><div class="fr">右边</div></div>
二、<div class="main"><div class="fl">左边</div><div class="fr">右边</div><div class="clear"></div></div>
样式
<style>
.clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; }
*html .clearfix{height:1%;}
*+html .clearfix{height:1%}
.clearfix{display:inline-block}
.clearfix {display:block;}
.clear{clear:both;height:0px;overflow:Hidden;display:block;} /**添加浮动标签末尾**/
.main{width:400px;}
.fl{float:left;width:200px;background:#ccc;}
.fr{float:right;width:200px;background:#ddd;}
</style>
大家有什么问题或技术上的想法可以在此与大家分享，也可以加入前端爱好者QQ群(141999928)一起学习进步：
【幸凡前端技术交流群】
如果您觉得本文的内容对您的学习有所帮助，捐赠与共勉，支付宝(左)或微信(右)