CSS3 前端开发_clearfix

前端开发移动视频播放|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 前端开发环境配置教程|指尖上行移动前端开发

» 本文来自:前端开发者 » 《CSS3 前端开发_clearfix》
» 本文链接地址:https://www.rokub.com/4802.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!