CSS一个解决浮动问题的hack

Clear:both其实是有瑕疵的
服务器君一共花费了229.394 ms进行了6次数据库查询,努力地为您提供了这个页面。
试试阅读模式?希望听取您的建议

在开发中,从美工MM给你Html代码中,肯定能经常看"<div style="clear:both;"></div>"这样的代码,但是你真的能明白它是做什么用的吗?

如:

<div style="border:2px solid red;">
    <div style="float:left;width:80px;height:80px;border:1px solid blue;">TEST DIV</div>
    <div style="clear:both;"></div>
</div>

你可以将此部分代码放到一个HTML页面看看效果,然后在去掉"<div style="clear:both;"></div>"看一下效果,就知道这句话的作用了。

原来后边的Clear:both;其实就是利用清除浮动来把外层的div撑开,所以有时候,我们在将内部div都设置成浮动之后,就会发现,外层div的背景没有显示,原因就是外层的div没有撑开,太小,所以能看到的背景仅限于一条线。

但这种办法就是最好了的吗?

我这么说,当然答案就不是了。可以采用通过Hack实现:

<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;">
        TEST DIV</div>
</div>

看完解决办法,咱们来看里边的原理:

首先是利用:after这个伪类来兼容FF、Chrome等支持标准的浏览器。

:after伪类IE不支持,它用来和content属性一起使用设置在对象后的内容,例如:

a:after{content:"(link)";}

这个CSS将会让a标签内的文本后边加上link文本文字。

利用"* html"这个只有IE6认识的选择符,设置缩放属性"zoom: 1;"实现兼容IE6。

利用"*:first-child + html"这个只有IE7认识的选择符,设置缩放属性"zoom: 1;"实现兼容IE7。

本文地址:http://www.nowamagic.net/librarys/veda/detail/890,欢迎访问原出处。

不打个分吗? 还木有人打分噢!

转载随意,但请带上本文地址:

http://www.nowamagic.net/librarys/veda/detail/890

如果你认为这篇文章值得更多人阅读,欢迎使用下面的分享功能。
小提示:您可以按快捷键 Ctrl + D,或点此 加入收藏

大家都在看

阅读一百本计算机著作吧,少年

很多人觉得自己技术进步很慢,学习效率低,我觉得一个重要原因是看的书少了。多少是多呢?起码得看3、4、5、6米吧。给个具体的数量,那就100本书吧。很多人知识结构不好而且不系统,因为在特定领域有一个足够量的知识量+足够良好的知识结构,系统化以后就足以应对大量未曾遇到过的问题。

奉劝自学者:构建特定领域的知识结构体系的路径中再也没有比学习该专业的专业课程更好的了。如果我的知识结构体系足以囊括面试官的大部分甚至吞并他的知识结构体系的话,读到他言语中的一个词我们就已经知道他要表达什么,我们可以让他坐“上位”毕竟他是面试官,但是在知识结构体系以及心理上我们就居高临下。

所以,阅读一百本计算机著作吧,少年!

《深入理解计算机系统(原书第2版)》 布莱恩特(Randal E.Bryant) (作者), 奥哈拉伦(David R.O'Hallaron) (作者), 龚奕利 (译者), 雷迎春 (译者)

《深入理解计算机系统》从程序员的视角详细阐述计算机系统的本质概念,并展示这些概念如何实实在在地影响应用程序的正确性、性能和实用性。全书共12章,主要内容包括信息的表示和处理、程序的机器级表示、处理器体系结构、优化程序性能、存储器层次结构、链接、异常控制流、虚拟存储器、系统级I/O、网络编程、并发编程等。书中提供子大量的例子和练习题,并给出部分答案,有助于读者加深对正文所述概念和知识的理解。

更多计算机宝库...