clearfix的用法 clearfix是什么意思

如果有一个DIV作为外部容器,内部的DIV如果设置了float样式,则外部的容器DIV因为内部没有clear,导致不能被撑开。看下面的例子:
Div布局如下:

Css代码如下:
.out{border:1px solid #F00; width:500px;}
.inner1{width:200px; height:200px; float:left; border:1px solid#00F;}
.inner2{width:200px; height:200px; float:left; border:1px solid#0F0;}
IE和FF显示如下图:

传统的人解决方法:

但是,这么多加一个DIV有点不妥。一是多了一个没有意义的DIV,二是在用dojo做Drag &Drop的时候,由于这个DIV是容器DIV的一个字节点,如果这个节点被移动,则会造成排版上的Bug:如果要显示的蓝框的DIV被移到这个DIV之后,则因为clear:both,它会被强制换一行显示。所以,最好使用下面clearfix方法。外层div加上clearfix样式。clearfix定义如下:
.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}
.clearfix{*zoom:1;}
这样修改以后显示正常。

那段代码是用来清除浮动的。
clearfix的用法 clearfix是什么意思
以下代码可以这么解释:
.clearfix:after{<----在类名为“clearfix”的元素内最后面加入内容;
content:".";<----内容为“.”就是一个英文的句号而已。也可以不写。
display:block;<----加入的这个元素转换为块级元素。
clear:both;<----清除左右两边浮动。
visibility:hidden;<----可见度设为隐藏。注意它和display:none;是有区别的。仍然占据空间,只是看不到而已;
height:0;<----高度为0;
font-size:0;<----字体大小为0;
}
整段代码就相当于在浮动元素后面跟了个宽高为0的空div,然后设定它clear:both来达到清除浮动的效果。(这个css的原理是经过使用after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个".",并且把他设置为块级元素(display="block");高度设置为0,clear="both",然后将其内容隐藏掉(visibility="hidden").这样就会撑开此块级元素.)

之所以用它,是因为,你不必在html文件中写入大量无意义的空标签,又能清除浮动。
.clearfix { *zoom:1;}<----这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话,不用深究,听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。

  

爱华网本文地址 » http://www.413yy.cn/a/25101018/372703.html

更多阅读

ems是什么意思? wto的是什么意思

ems是什么意思?——简介EMS就是Express Mail Service的缩写。它是由万国邮联管理下的国际邮件快递服务,是中国邮政提供的一种快递服务。主要是采取空运方式,加快递送速度,一般来说,根据地区远近,1-4天到达。ems是什么意思?——EMS的优点ems

18K和AU750的区别 18k750是什么意思

通常在金饰商品上都会有“18K”或“AU750”的标示,标明该商品的材质。那么au750和18K金是什么金?Au750和18K金的价格如何?Au750和18K哪个更好些?其实,18K金和au750金是同一种东西的不同名称,都含有75%黄金+稀有金属,是通过

太极拳中的内外相合是什么意思 太极拳是什么意思

太极拳中的内外相合是什么意思?先来看下内外相合的歌诀!研练太极求阴阳,对立统一心中装。内外相合太极路,循路求实功夫长。先练聚化后求钢,内动外随序向定。先慢放松求柔和,再练紧凑圆出方。相合关键起止点,呼吸配合是妙方。太极拳外三合是

电影的BD版本是指什么? 电影bd版是什么意思

电影名中的BD版本是什么意思(转自百度知道) BD是Blue Disk的简称,翻译成中文是“蓝光影碟”的意思。DVD的激光头现在用的是橙红色,兰光的波长更小,也就是在碟片上的聚焦点更小,这样就能把更多的数据储存在同样大小的碟片上,这就是

佛教的“南无”是什么意思? 佛教歌曲南无阿弥陀佛

在汉传佛教的寺院墙壁上,我们常常可以看到六个大字“南无阿弥陀佛”。很多人不明白“南无”是什么意思。我在北京灵光寺听到过一个家长给孩子这样解释:因为阿弥陀佛是在西方,所以南面没有,南无阿弥陀佛就是提醒大家不要走错路。我特别佩

声明:《clearfix的用法 clearfix是什么意思》为网友以微笑面对分享!如侵犯到您的合法权益请联系我们删除