对联 ·故事 ·史海钩沉 ·人物档案 ·地方风俗 ·谚语大全 ·讽刺与幽默 · 赚钱 · 法律 · 在线教研 · 会员中心 · 心理测试 · 魔鬼词典 · 顺口溜
 
主页特效 网页特效 百家姓
娱乐 歇后语 绕口令 脑筋急转弯
 
谚语 谜语 名言 邮政编码
便民 酒方 验方 偏方 站长工具  
 
算命 风俗 手相 爱情
女孩 音乐 面相 星座 血型
 
饮食 穴道 偏方 医药
生活 软件 硬件 解梦 高考



   JS特效



实用工具
便民服务 加密解密
 
魅力高密 民间故事 Flash教程 PS教程 最新国内新闻
新华字典 黄道吉日 英语园地  万年历 Html2anycode
  首页 | 美图 | 短信 | 安全 | 校园 | 网站 | 游戏 | UFO | 文秘 | 生活 | 信息技术 | 论文 | 人生 | 情感 | 日记
返回首页
当前位置: 主页 > 网站建设 >

css中的overflow:hidden;和zoom:1

时间:2013-02-01 15:59来源:www.panpan.org 作者:菁菁 点击:
css中的overflow:hidden;和zoom:1 就此问题来谈谈清除浮动的几种方法 1. 投机取巧法 就是直接一个div style=clear:both;/div放到当作最后一个子标签放到父标签那儿,此方法屡试不爽,兼容性强,
  

css中的overflow:hidden;和zoom:1


就此问题来谈谈清除浮动的几种方法

1. 投机取巧法
    就是直接一个<div style="clear:both;"></div>放到当作最后一个子标签放到父标签那儿,此方法屡试不爽,兼容性强,使用方便,是初学时使用的上佳之选。但是我从来不用,因为我看到的是个巨大的浪费,浪费了一个标签,而且只能使用一次,我个人是无法容忍的,所以这个方法不推荐。而且有时候一不留神中间多了个空格会产生一段空白高度的。

2. overflow + zoom方法
.fix{overflow:hidden; zoom:1;}

    此方法优点在于代码简洁,涵盖所有浏览器,可谓不错的选择啊。不过也是有问题的,就是这个overflow:hidden;是个小炸弹,要是里面的元素要是想来个margin负值定位或是负的绝对定位,岂不是直接被裁掉了,所以此方法是有不小的局限性的。我一般不用这个方法,只是有时候顺便去除浮动时用用。

3. after + zoom方法
    先来简单讲讲after,所谓after,就是指标签的最后一个子元素的后面。于是呢,我们可以用CSS代码生成一个具有clear属性的元素,其中的关键样式就是content了。或许您从网上看到的content里面的内容是”.”一个点,我了很多次,貌似随便写什么东西都没有问题,比如content:'clear both';没问题,或是content:'佰亿'也是ok的。于是有:.clr{zoom:1;}
.clr:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

    这里的line-height:0写成height:0也是可以的。此方法可以说是综合起来最好的方法了,我都是用这个样式清除浮动的,不会影响任何其他样式,通用性强,覆盖面广,我很推荐哦。

顶一下
(1)
100%
踩一下
(0)
0%
------分隔线----------------------------
最新评论 查看所有评论
发表评论 查看所有评论
请自觉遵守互联网相关的政策法规,严禁发布色情、暴力、反动的言论。
评价:
表情:
用户名: 密码: 验证码:
赞助商位置
推荐内容
杂七杂八