清除浮动最有效的css写法,清除浮动最有效的css写法

说起来呢，基本上只要你给容器div加了float的属性，就需要清除浮动来使页面显示正常，那么，到底有什么方法可以让浮动轻松清除呢？

可以用display：flex;替代，但是它对IE8，9支持不是很好，所以不怎么这么用。

1.在容器div的里面结束标记之前写如下这样的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;

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