css clearfix清除浮动是什么意思

html-css035

css clearfix清除浮动是什么意思,第1张

clearfix的定义:

[css] view plain copy print?

.clearfix:after {}{

content: "."/**//*内容为“.”就是一个英文的句号而已。也可以不写。*/

display: block /**//*加入的这个元素转换为块级元素。*/

clear: both/**//*清除左右两边浮动。*/

visibility: hidden /**//*可见度设为隐藏。注意它和display:none是有区别的。visibility:hidden仍然占据空间,只是看不到而已;*/

line-height: 0 /**//*行高为0;*/

height: 0/**//*高度为0;*/

font-size:0 /**//*字体大小为0;*/

}

.clearfix {}{ *zoom:1} /**//*这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。*/

.clearfix的原理:

1、在IE6, 7下zoom: 1会触发hasLayout,从而使元素闭合内部的浮动。

2、在标准浏览器下,.clearfix:after这个伪类会在应用到.clearfix的元素后面插入一个clear: both的块级元素,从而达到清除浮动的作用。

3、在需要清除浮动的时候,只要写一个.clearfix就行了,然后在需要清浮动的元素中 添加clearfix类名就好了。

自设class名。一般约定俗成的是清除浮动。

.clearfix{

    overflow:hidden

    clear:both

    width:0

    visibility:hidden

    }

当然咯。还有简单的方法。就是在当前元素的父级元素上添加overflow:hidden(有局限性,不过简便)