博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
overflow:hidden;zoom:1 理解转__
阅读量:6405 次
发布时间:2019-06-23

本文共 927 字,大约阅读时间需要 3 分钟。

overflow:hidden;zoom:1

http://hi.baidu.com/bbee888/item/ef80baf200de510085d27824

 

清除浮动的几种方法

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也是可以的。此方法可以说是综合起来最好的方法了,我都是用这个样式清除浮动的,不会影响任何其他样式,通用性强,覆盖面广,我很推荐哦

转载于:https://www.cnblogs.com/kaka100/p/3470973.html

你可能感兴趣的文章
网站管理后台模板 Charisma
查看>>
EL:empty的用法
查看>>
Saltstack配置之 nodegroups
查看>>
Servlet和JSP优化经验总结
查看>>
squid使用rotate轮询(分割)日志
查看>>
VS2015安装EF Power Tools
查看>>
MySQL主从复制(笔记)
查看>>
keepalived高可用集群的简单配置
查看>>
Android Java Framework显示Toast(无Activity和Service)
查看>>
通过 SignalR 类库,实现 ASP.NET MVC 的实时通信
查看>>
NavigationController修改状态条颜色
查看>>
16大跨平台游戏引擎
查看>>
NPS如何配置基于mac地址的8021x认证
查看>>
XenServer架构之XAPI的调用流程
查看>>
redhat下搭建LAMP架构
查看>>
GitHub详细教程
查看>>
raid技术的读与想
查看>>
Hbase 中Column Family 的作用
查看>>
用鸡讲解技术债务的形成过程?
查看>>
Linux下的Tftp服务
查看>>