W3标准不变 清除浮动实现代码

所属分类: 网页制作 / CSS 阅读数: 638
收藏 0 赞 0 分享
W3C整天研究html5,就不能抽出点时间来把这种烦人的小细节修正一下吗?抱怨归抱怨,饭还得吃,钱还得挣,清除浮动就不能停止。

为了清除浮动增加无语义代码已经是最稳定和简单的方式,但总叫开发者心里感到不舒服,毕竟这么多年来早已习惯了结构和样式的分离,非要在结构中插入这样一行无语义代码就会让人觉得有种难以掌握的感受。

通过css代码清除浮动也不省油,光是当前这种多个浏览器瓜分浏览器份额的状况所带来的各种css hack就够让人头疼的了,而且这还没说到那些个浏览器的不同版本之间又有多少的差别。通过css清除浮动还是一个长期的过程,因为你还要期盼下一牌浏览器没有针对浮动修改对html代码的解释。

要说在当前这种恶劣的状况下,选取哪种方式去清除浮动最为可取,这事一个人说了不算,要看大家的意见。

很多时候,开发人员在前端开发时遇到问题,就会去找那些运用了类似技术的大型网站,去分析它们的解决方案,然后用到自己的网站上,连为什么都省得去想了。我也常常这么做。具体到清除浮动这个问题上,我现在所用的无语义标签法就是在看到某大型网站用过之后,我才选用的。

不过今天重提这个问题,是因为我又在一个大型网站上看到了不同的方案。它们是这样做的:

复制代码
代码如下:

<style>
.clearfix:after{
visibility: hidden;
display: block;
font-size: 0;
content: ".";
clear: both;
height: 0;
}
* html .clearfix{zoom: 1;}
*:first-child + html .clearfix{zoom: 1;}
</style>
<div class="clearfix" style="border: 2px solid red;">
<div style="float: left; width: 80px; height: 80px; border: 1px solid blue;">
我的网站
</div>
</div>

虽说这是来自大型网站,可信任度很高,可以不去思考而直接用,但学习的态度还是要有,就此分析一下其中的原理。

1)首先是利用:after伪类来兼容支持这一标准的浏览器们,FF、Chrome自然属于强烈支持标准的浏览器行列,不过IE自从繁殖到第八代开始,也表示支持这一伪类。:after伪类用来和content属性一起使用设置在对象后的内容。

如果现在不是2012看,而是10年后,可能就不用再往下讲了。但因为现在IE6和IE7还很有势力,所以,我们还得好好照顾它们。:after伪类IE不支持,它用来和content属性一起使用设置在对象后的内容,例如:

复制代码
代码如下:

.clearfix:after {content:".";}

这个CSS将会让clearfix类标签内的文本后边加上英文句号。

3)"* html"这个选择符只有IE6才能识别,因此在其中设置缩放属性"zoom: 1;",便可实现兼容IE6;"*:first-child + html"这个选择符只有IE7才能识别,因此设置缩放属性"zoom: 1;" 便可实现兼容IE7。

原理分析完毕。方法是可行的,完美解决是不可能的。所以,W3标准中的浮动一天不变,清除浮动就会一天不止。
更多精彩内容其他人还在看

CSS3实现背景透明文字不透明的示例代码

这篇文章主要介绍了CSS3实现背景透明文字不透明的示例代码的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

浅谈CSS中的尺寸单位

这篇文章主要介绍了浅谈CSS中的尺寸单位的相关资料,浏览器的兼容性越来越好,移动端基本是清一色的webkit,经常会用到css的不同尺寸/长度单位,这里做个整理。感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

CSS中有些属性的前面会加上“*”或“_”所代表的意思

这篇文章主要介绍了CSS中有些属性的前面会加上“*”或“_”所代表的意思,需要的朋友可以参考下
收藏 0 赞 0 分享

CSS 设置滚动条样式的实例代码

这篇文章主要介绍了CSS 设置滚动条样式的实例代码,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧
收藏 0 赞 0 分享

纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)

这篇文章主要介绍了纯CSS制作各种各样的网页图标(三角形、暂停按钮、下载箭头、加号等)的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

纯css实现多级折叠菜单折叠树效果

这篇文章主要介绍了纯css实现多级折叠菜单折叠树效果,运用checkbox的checked值来判断下级栏目是否展开,通过css3选择器提供的checked伪类来实现此效果,感兴趣的朋友参考下吧
收藏 0 赞 0 分享

CSS Grid 网格布局全解析

这篇文章主要介绍了CSS Grid 网格布局全解析的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

css flex 弹性布局详解

这篇文章主要介绍了css flex 弹性布局详解的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

CSS3 二级导航菜单的制作的示例

这篇文章主要介绍了CSS3 二级导航的制作的示例的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

使用css禁用input、checkbox、select等html控件实现disable效果

这篇文章主要介绍了使用css禁用input、checkbox、select等html控件实现disable效果,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多