CSS网页制作教程:浮动清除的新方法

2016-02-20 01:14 3 1 收藏

在这个颜值当道,屌丝闪边的时代,拼不过颜值拼内涵,只有知识丰富才能提升一个人的内在气质和修养,所谓人丑就要多学习,今天图老师给大家分享CSS网页制作教程:浮动清除的新方法,希望可以对大家能有小小的帮助。

【 tulaoshi.com - Web开发 】

起源:

.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 的支持之后,新的清除浮动方法:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
/* 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。可以参考 Andy Ford 的 demo

对于那些不愿意再给标签添加额外的 clearfix 类来清除浮动的人来说,直接将需要清除浮动的元素添加进清除浮动代码块这个组也是一个办法。

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
.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.tulaoshi.com/n/20160220/1633540.html

延伸阅读
标签: Web开发
课程关键词:清除浮动Clear 还记得第二课我们做的例子的效果么?最后效果是,红色方块和蓝色方块都处于一行,我们使用Float:left,打击了块状元素的霸道即块状元素不允许其他元素和它处于同一行。我们将红色方块的CSS代码中加入了Float:left;后,红色方块终于允许蓝色方块和它处于同一行。如图: 我们换一种方法表达上面的意思,因为红色...
标签: Web开发
在写HTML代码的时候,发现在Firefox等符合W3C标准的浏览器中,如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子: HTML4STRICT代码:div style="width:200px;border:1px solid red;"    div style="float:left;width:80px;height:...
今天我们介绍一种Photoshop制作怀旧照片的新方法。 学习之前,我们先看看对比效果图: 首先,在Photoshop中打开一张照片。 复制一个图层备用 点菜单上的“滤镜-艺术效果-胶片颗粒”,设置如下图:(这个滤镜可以让照片的表面布上一层颗粒) 执行颗粒滤镜后的效果: 选择菜单“图像-调整-去...
标签: 瘦身
健走不是只有直直往前走一种方式,而可以根据你的个人需求,有各种变化方式。根据在美国推广健走十多年的《预防》杂志对它的读者回信所做的分析,已有美国民众用以下9种方式,为达成不同目标而走。   为了增加活力而快乐走 即使只是走10分钟的路,都能立即像为车子充电般,变得活力充沛...
标签: Web开发
遇到网页上有精美图片或者精彩文字想保存时,通常大家都是选中目标后按鼠标右键,在弹出菜单中选择“图片另存为”或“复制”来达到我们的目的。但是,目前有许多网页都屏蔽了鼠标右键,致使我们一按鼠标右键就会弹出个窗口,上面写着XXX版权所有、禁止使用右键之类的话,对此大家都已经习以为常了。 其实,这是由于网页文件中被加入了如下...

经验教程

947

收藏

86
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部