当前位置 : 主页 > 网页制作 > css >

css的clearfix如何实现清楚浮动

来源:互联网 收集:自由互联 发布时间:2023-08-02
css的clearfix实现清楚浮动的方法:首先在需要清除浮动的时候,只要写一个【.clearfix】就行了;然后在需要清浮动的元素中添加clearfix类名就好了。 本教程操作环境:windows7系统、css3版

css的clearfix实现清楚浮动的方法:首先在需要清除浮动的时候,只要写一个【.clearfix】就行了;然后在需要清浮动的元素中添加clearfix类名就好了。

css的clearfix如何实现清楚浮动

本教程操作环境:windows7系统、css3版,DELL G3电脑。

css的clearfix实现清楚浮动的方法:

clearfix的定义:

.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类名就好了。

相关教程推荐:CSS视频教程

上一篇:css怎么设置字体为微软雅黑
下一篇:没有了
网友评论