清除浮动新说(2)
作者:糖伴西红柿 来源:前端观察 发布时间:2009-12-25 18:49:00
糖伴西红柿说:
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。可以参考 Andy Ford 的 demo
对于那些不愿意再给标签添加额外的 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 代码却出现了一定的繁冗。而且一旦专题页面过长,或者在项目中使用,用这个清除组的方式反而会不胜其扰。
归结下来,还是得看个人、项目的权衡选择.虽然我一直用简单粗暴的overflow:hidden,但是现在更倾向于使用 clearfix,感觉这种一体化的东西更靠谱,能避免偶尔对 zoom 的遗忘。
成熟的东西稳定性好,但是会比较复杂、厚重;简单的灵活性好,但是过于零散、随意,没有组织性,还没那么稳定.权衡决定到底要使用那种方法,有时候反而比问题本身还让人头疼.
我个人的想法是没有好与坏的区别,只有合适不合适的区别。但是我们一直都受困于所受的教育,什么问题都有标准答案,非对即错,非好即坏。经常可见对一些工具的讨论,都是奔着争出个谁好谁坏而去的,例如 jQuery mootools YUI.相比起到底是好谁坏,我们还是最好赶紧转变思想,摒弃”一刀切”的思想吧。
最后,关于为什么要采用一下这种复杂方式来针对IE6/7,而不采用其他稍微简洁的方式,还希望大家给我指点下迷津。
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */
Reference:
[1].Jeff Starr,The New Clearfix Method, December 6, 2009
[2].Andy Ford, Saying Goodbye to the overflow: hidden Clearing Hack, December 10th, 2009
猜你喜欢
- 在项目中遇到一情况让困扰了半天,同一张PNG8图片为何部份图标在IE6中消失呢?当时一度怀疑是cache或hosts问题反反复复开关浏览器结
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 8 - Input Filtering Part
- 虽然淘宝商城的名字中带有“商城”两字,但是很显然的,淘宝商城并不是一个B2C商城,淘宝商城仍只是一个C2C平台,充其量只是个收费版的淘宝。在
- 网站 首页页面宽度 px Yahoo! 950 淘宝 950 MySpace 960 新浪 950 网易 960 Live Search 9
- 判断访问是否来自搜索引擎的函数,有兴趣的可以试试! <% '检查当前用户是否是蜘蛛人 Function check(
- 如何在第10000名来访者访问时显示中奖页面?看看下面的代码:< SCRIPT LANGUAGE=VBScript
- 具体代码见下。在此程序中,由于使用了变量,我们需将全部聊友的昵称用“,”(逗号)来隔开,储存到application("visit
- 随着对称密码的发展,DES数据加密标准算法由于密钥长度较小(56位),已经不适应当今分布式开放网络对数据加密安全性的要求,因此1997年NI
- 网上大部分的免费asp程序使用的是access数据库。但是access数据库作为一个中小型的单机数据库系统,在承担访问量、数据量大的网站应用
- 有朋友问,在数据库中如何查询数据所在的行,一般我们建议一个自增字段就可以了.但是有时却会删除数据,那么那个自增字段也不正确了先不管朋友们为什
- 在这里我们将介绍的是MySQL内存使用上的线程独享,线程独享内存主要用于各客户端连接线程存储各种操作的独享数据,如线程栈信息,分组排序操作,
- 先简单说一下MP3的ID3 标记,因为主要是操作这个玩意MP3最开始的时候没有我们今天看到的那样,有歌手、年代,专集等等信息只有一些简单的参
- 八种获取当前日期的js代码,第一步:把如下代码加入<head>区域中:<SCRIPT language=java
- 使用字符串建立查询能加快服务器的解析速度吗?我记的在那儿看过,好像是说使用字符串建立SQL查询是有它的道理的,像这样:<%mySQL=
- 目的: 从数据库读取二进制位图图形数据资料, 透过 ImageMagickObject 组件即时制作缩略图,并显示在网页上 (ge
- 在oracle中有很多关于日期的函数,如:1、add_months()用于从一个日期值增加或减少一些月份 date_value:=add_m
- 简单的说,组织体系指的就是组织信息的方式。看了一堆拗口的定义后,我根据自己的理解画了下面这个图:从上图看出,同样的图形元素由于采用了不同的组
- 安装方法: regsvr32 parmf.dll附 如果想取消注册可以:regsvr32 /u&nb
- 如何在ADO中使用SQL函数?代码见下:<%Set conn1 = Server.CreateObjec
- AdobeAdobe公司的标识1982年,40多岁的程序员约翰·沃诺克(John Warnock)和查尔斯·杰斯克(Charles Gesc