float
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix { display: inline-table; }
/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
说明:
- *对大多数符合标准的浏览器应用第一个声明块,目的是创建一个隐形的
内容为空的块来为目标元素清除浮动。 - *第二条为clearfix应用 inline-table 显示属性,仅仅针对IE/Mac。
*利用 * / 对 IE/Mac 隐藏一些规则: - * height:1% 用来触发 IE6 下的haslayout。
- *重新对 IE/Mac 外的IE应用 block 显示属性。
- *最后一行用于结束针对 IE/Mac 的hack。
由于此方法针对的浏览器或成为历史(尤其是Mac下的IE5 ),或正在靠近
标准的路上,这个方法就不再那么与时俱进了。
抛掉对 IE/Mac 的支持之后,新的清除浮动方法:
/* new clearfix */
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
说明:
IE6 和 IE7 都不支持 :after 这个伪类,因此需要后面两条来触发IE6/7的haslayout,以清除浮动。幸运的是IE8支持 :after 伪类。因此只需要针对IE6/7的hack了。
Jeff Starr 在这里针对IE6/7用了两条语句来触发haslayout。我在想作者为什么不直接用 * 来直接对 IE6/7 同时应用 zoom:1 或者直接就写成:
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix{*zoom:1;}
以我目前的浅薄认知来讲,以上写法应该也可以直接达到同样效果。关于这个地方,在文章的评论里也有些讨论,我希望再听听大家的高见。
我平时都是用 overflow:hidden 来清除浮动的,但是 overflow 有时候也不太适用:
父级元素使用 overflow:hidden 时,如果其子元素定位到部分或全部在父元素之外,父元素就会对超出其外的子元素部分进行裁剪。
对 css3 来说,也会 overflow:hidden 也会对一些属性产生影响。
例如 box-shadow, 当父元素使用 overflow:hidden 属性时,box-shadow 会被裁剪。
其他可能被影响的元素如 text-shadow 和 transform。可以参考W3Cschool.
对于那些不愿意再给标签添加额外的 clearfix 类来清除浮动的人来说,直接将需要清除浮动的元素添加进清除浮动代码块这个组也是一个办法。
.group:after,
#content:after,
#sidebar:after,
#some .other .thing:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
zoom:1;
}
这种情况下,html 和 css 文件就像一个跷跷板的两头。html 代码倒是整洁了,css 代码却出现了一定的繁冗。而且一旦专题页面过长,或者在项目中使用,用这个清除组的方式反而会不胜其扰。
最新文章
- Mysql加锁过程详解
- Win10安装程序出现error code 2502 2503
- C#打印条码与ZPL
- SQL--空值处理
- paip.log4j兼容linux windows 路径设置
- 微博app中常用正则表达式
- <;转>;数据库设计的三大范式
- Ajax概述
- css笔记——移动端
- 国外程序员整理的 C++ 资源大全
- UVA1450-Airport
- tomcat启动时间过长的问题
- C#语法相比其它语言比较独特的地方
- Phaser.js之简单的跑酷游戏
- flex布局下el-table横向滚动条失效
- Zookeeper命令行world
- golang gopacket网络抓包和分析
- LOJ#3052. 「十二省联考 2019」春节十二响(启发式合并)
- Oracle_spatial的空间操作符介绍
- 【Revit API】创建工作集并将element加入工作集中