找回密码
当前位置：前端开发者 > CSS > 正文

CSS3 前端开发_clearfix

2018-07-24 分类：CSS 阅读(791) 评论(0)

前端开发移动视频播放|web前端开发 教程|移动web前端开发案例

先说下自己经常用的伪类清除浮动的方法：
css 代码

.clearfix {
    *zoom: 1;
}
.clearfix: after {
    display: block;
    height: 0;
    content: “”;
    clear: both;
    visibility: hidden;
}

其实标准的是这样：
css 代码

.clearfix {
    *zoom: 1;
}
.clearfix:after {
    display: block;
    height: 0;
    content: “”;
    font-size: 0;
    clear: both;
    visibility: hidden;
}

但上述方法被继续优化了，出现了下面两个版本：
<一>、
css 代码

.clearfix {
    *zoom: 1;
}
.clearfix:after {
    content: “\200B”;
    display: block;
    height: 0;
    clear: both;
}
/*
*这里的200B是Unicode字符中的一个‘零宽度空格’，比之前的‘’缩减了代码量，
*不再使用visibility: hidden;
*/

<二>、
css 代码

.clearfix {
    *zoom: 1;
}
.clearfix:after {
    clear: both;
}
.clearfix:before,
.clearfix:after {
    content: “”;
    display: table;
}

建议大家再遇到需要清除浮动时，用下最新优化过的方法 _

前端公众号开发教程|web 前端开发环境配置教程|指尖上行移动前端开发

赞(0)
前端开发者 » CSS3 前端开发_clearfix
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论