首页 > 教程 > 关键词   >  清除浮动最新资讯  > 正文

清除浮动新说

2009-12-28 14:48 · 稿源:前端观察

糖伴西红柿说:

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

原文:https://www.qianduan.net/new-clearfix.html

举报

  • 相关推荐
  • 大家在看
  • 入选联合国案例集!AI拯救濒危动物,飞桨助力清除1.3万余条非法贸易广告

    7月9日,百度飞桨"濒危物种AI守护官"项目入选联合国AI向善全球峰会创新案例集。该项目通过AI技术识别野生动物制品图片,截至2025年6月已推动删除超1.3万条非法贸易广告。这是百度与国际爱护动物基金会(IFAW)合作研发的2.0版本,基于飞桨深度学习平台,识别准确率达86%,覆盖34类濒危物种及其制品。项目曾获2025爱迪生最佳新产品奖银奖。全球非法野生动物贸易年交易额高达230亿美元,该项目通过AI技术显著提升了网络野生动物犯罪识别效率,已筛查超41万张可疑图片,精准识别3.3万幅目标图片。AI向善全球峰会由国际电信联盟和瑞士政府共同主办,是推动AI技术发展与应用的重要平台。

  • 清除浮动的最优方法

    在CSS森林(30247792)群里讨论一个margin的问题中无意间发现overflow也可以用来清除浮动,嘿嘿,这个方法不单使用简单,而且FF、OP、IE7都支持,从此可以告别那又长兼容性又差的FF清浮动的方法了。

  • CSS教程:清除浮动的方法大全

    早段时间特别的忙,忙到站点一直没有更新;但是这段时间也是偷偷的做了一些的工作,比如对站点的JS进行了压缩,构思labs分站以及聚合分站。

  • CSS清除浮动的应用 位置影响IE和Chrom浏览器的错位

    随着宽屏时代的到来,在现在的网页设计当中,人们对于网页排版有了更多的发挥空间。继而随之的是,往往我们现在所看到的许多网页,都被错落有致的划为了两列或者多列的布局,从而在视觉和操作上带来不一样的体验。

  • 浮动及清除网页设计员必备的两个工具

    在本文中你将开始了解浮动与清除——现代网页设计员必备的两个工具。它们的用途很多,你可以利用它们来使文本环绕在图像周围,或者甚至用来创建多列布局。

  • 微芯片脑部植入物让瘫痪男子能够重新说话

    根据《科学》今日发布的一份报告,一名患有肌萎缩侧索硬化的男子已经能够再次 “说话”...正如《科学》指出的那样,虽然帮助“被锁住”的病人保持某种程度的表达能力的大脑植入物对研究和病人的整体健康都有帮助,但有许多道德问题需要考虑...当各种运动信号的尝试被证明过于不一致时,他们转向了一个更成功的系统,病人将尝试使用植入物来匹配正在播放的声音信号...研究人员认为,植入物周围形成的疤痕组织是一个因素,但也可能是由于疾病的发展和对病人大脑造成的伤害...

  • 保卫萝卜3手游怎么快速清除道具 快速清除道具方法

    保卫萝卜3官网:  保卫萝卜3手游中怎么快速清楚道具?快速清除道具有什么技巧?今天安趣小哥就来给大家详细介绍一下快速清除道具的技巧!  1、保卫萝卜3每一关开始之前或者是怪物进攻之前都会给相应的时间来清理道具。  2、在怪物攻击的空隙进行清除。  3、玩家可以利用群攻进行消除。  以上就是安趣小编给大家带来的全部内容了,要想了解更多游戏资讯,游戏攻略,游戏视频等尽在安趣网《保卫萝卜3》手游专区,安趣小哥期待小伙伴的到来!

  • 《辐射4》清除屋内骨头方法辐射4避难所骨头清除技巧

    辐射4房屋建造系统非常的完善,但是由于末日模式下死人尸骨会在屋内出现,不少强迫症患者会非常介意,小编为大家提供《辐射4》清除屋内骨头方法,清除以后不会再出来,这个避难所骨头清除技巧大家可以借鉴一下。

  • 网贷巴士所有数据被黑客清除?官方:未被清除,但可能被篡改

    网贷巴士在其官方微信公众号发文称网贷巴士官方网站遭黑客袭击,并且接到黑客的勒索条件。

  • 交换友链之老话新说

    刚开始给网站找友链的时候就跟个无头苍蝇一样横冲直撞,每天沉浸在互联网的海洋里翻来覆去,结果忙活了一个星期一个友链都没有换到。后来问了几个朋友到底改怎么换友链,也有了是不是换友链是很艰难的事情这样的困惑。

这篇文章对你有价值吗?

今日大家都在搜的词: