清除浮动最有效的css写法

说起来呢，基本上只要你给容器div加了float的属性，就需要清除浮动来使页面显示正常，那么，到底有什么方法可以让浮动轻松清除呢？ 
可以用display：flex;替代，但是它对IE8，9支持不是很好，所以不怎么这么用。

1.在容器div的里面结束标记之前写如下这样的div这段代码：

<div style="clear:both"></div>

虽然通俗易懂，容易掌握，但是在页面中加入了一个无意义的空标签，违背了结构和表现分离的web标准的精髓，如果页面空标签多的话，对于后期的维护会造成一定的困难。一般来说，现在已经不采用这种方法。

2.在浮动容器div的css样式中加入overflow属性。

3.将父元素也变成浮动元素，但是影响整个页面的布局，不推荐使用。

4.使用:after伪元素，一般增加clearfix的class，大概写法如下：

.clearfix:after{
   content:".";/*加一段内容*/
   display:block;/*让生成的元素以块级元素显示，占满剩余空间*/
   height:0;/*避免生成的内容破坏原有布局高度*/
   clear:both;/*清除浮动*/
   visibility:hidden;/*让生成的内容不可见*/
  }
  .clearfix{zoom:1;/*为IE6，7的兼容性设置*/}

除了clear:both;是为了清除浮动以外，其他的属性就是为了隐藏这个元素，所以我们对它进行了改进一下：

 .clearfix:after,.clearfix:before{
   content:".";/*加一段内容*/
   display:table;/*创建匿名的表格单元，触发bfc*/
}
 .clearfix:after{
   clear:both;/*清除浮动*/
  }
 .clearfix{zoom:1;/*为IE6，7的兼容性设置*/}

.clearfix:before，加上before，对清除浮动没什么作用，防止浏览器顶部空白崩溃，也就是说，margin-top和上一个盒子的margin-bottom它们会发生一个叠加，这么做就是防止叠加，其实没有这个需要，去掉before也没啥问题。 
原理和第一种方法差不多，就是用clear:both;

使用的原理基本上就是触动bfc， 
bfc：block formating contexts 块级格式化上下文 
比如下面这些就是： 
float：left; 
overflow：auto; 
display：table-cell; 
display:table-caption; 
display:inline-block; 
position:fixed; 
position:absolute;

目前就是用最后的一种方式来进行清除浮动，毕竟优雅~~~

原文地址：https://blog.csdn.net/u012396955/article/details/60341523