今天小编跟大家讲解下有关css清除浮动的几种方法和示例 ，相信小伙伴们对这个话题应该有所关注吧，小编也收集到了有关css清除浮动的几种方法和示例 的相关资料，希望小伙伴们看了有所帮助。
1、【.clr{clear:both;}】 设置了clear属性的元素 其上边框会紧贴着浮动元素的margin-bottom边界位置渲染 忽略其margin-top设置。复制代码代码如下:.divcss5{ width:400px;border:1px solid #F00;background:#FF0} .divcss5-left,.divcss5-right{width:180px;height:100px; border:1px solid #00F;background:#FFF} .divcss5-left{ float:left} .divcss5-right{ float:right} .clear{ clear:both}
2、空标签清浮动：【.clr{clear:both;height:0;overflow:hidden;}】 不推荐。
3、伪类after清浮动：【.clr:after{content:" ";clear:both;display:block;height:0;visibility:hidden;line-height:0;} .clr{zoom:1}】。
4、使用【display:table】。
5、使用overflow除visible 类似于激发haslayout。
6、使用浮动父元素清浮动。复制代码代码如下:.divcss5{ width:400px;border:1px solid #F00;background:#FF0; overflow:hidden} .divcss5-left,.divcss5-right{width:180px;height:100px;border:1px solid #00F;background:#FFF} .divcss5-left{ float:left} .divcss5-right{ float:right}
来源：爱蒂网
