伪元素清除浮动及原理

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了伪元素清除浮动及原理相关的知识,希望对你有一定的参考价值。

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

1) display:block 使生成的元素以块级元素显示,占满剩余空间;

2) height:0 避免生成内容破坏原有布局的高度。

3) visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互;

4)通过 content:"."生成内容作为最后一个元素,至于content里面是点还是其他都是可以的,例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙;

5)zoom:1 触发IE hasLayout。

以上是关于伪元素清除浮动及原理的主要内容,如果未能解决你的问题,请参考以下文章

关于清除浮动的方法

浮动与清除浮动的六种方法

浮动及清除浮动的方式

overflow:hidden清除浮动原理解析及清除浮动常用方法总结

为何要清除浮动?如何清除?

转载的清除浮动