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

overflow:hidden;zoom:1 理解转__相关推荐

  1. 对CSS了解-overflow:hidden

    overflow:hidden 列出我在项目中,运用到此属性的例子: (1)暴力清除浮动 <style type="text/css">.wrap {overflow: ...

  2. 深入理解:overflow:hidden——溢出,坍塌,清除浮动

    深入理解:overflow:hidden--溢出,坍塌,清除浮动 overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有 ...

  3. html清除溢出,深入理解CSS overflow:hidden——溢出,坍塌,清除浮动

    overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有这么多的功能时,难免使人难以把握,不过不要怕,只要信:看完这篇文章 ...

  4. 理解overflow:hidden

    overflow:hidden意为清除浮动 主要有三个作用 第一隐藏溢出 当div中的文字超出了div的容量,加上overflow:hidden;超出容量的文字,便不再显示 第二清除浮动 父div中有 ...

  5. overflow:hidden的另一层含义

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是 很了解.一提到清除浮动,我们就会想到另外一个CSS样式 ...

  6. overflow:hidden属性

    overflow:hidden这个CSS样式是大家常用到的CSS样式,但是大多数人对这个样式的理解仅仅局限于隐藏溢出,而对于清除浮动这个含义不是很了解. 一提到清除浮动,我们就会想到另外一个CSS样式 ...

  7. 容易被误解的overflow:hidden

    为了页面的健壮性,我们常常需要使用overflow:hidden.有时候是为了防止布局被撑开,有时候是为了配合其它规则实现文字截断,还有时候纯粹是为了创建块级上下文.但是,很多人对这个属性是存在着一定 ...

  8. 关于overflow:hidden的作用(溢出隐藏、清除浮动、解决外边距塌陷等等)

    一. overflow:hidden  溢出隐藏 给一个元素中设置overflow:hidden,那么该元素的内容若超出了给定的宽度和高度属性,那么超出的部分将会被隐藏,不占位. /*css样式*/ ...

  9. 兼容性—IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素...

    IE6/7下带有overflow:hidden属性的父级元素包不住带有position:relative属性的子元素 <!DOCTYPE html> <html lang=" ...

最新文章

  1. Winform下载文件
  2. c#获取当前应用程序所在路径
  3. 在编程竞赛中,有6个评委为参赛的选手打分,分数为0-100的整数分。 * (静态初始化一个数组,在数组中随意写入6个分数) 选手的最后得分为: * 去掉一个最高分和一个最低分后 的4个评委平均值。
  4. [转]ClassPath是什么
  5. 测试 REST API,到底应该选择什么样的 VS Code 插件?
  6. python能干什么知乎-python能做什么知乎
  7. 搜狗输入法 android 历史版本,搜狗输入法旧版
  8. 网易云音乐api使用—基于node.js服务器
  9. Canvas绘制六边形网格
  10. 试验数据的筛选和质量可视化
  11. 求求你们了,有什么能搞钱的副业
  12. 浅谈Word.Application,关于js操作word文档的使用
  13. 云服务器系统一键安装,一键安装服务器系统
  14. flink catalog 及dialect、数据转存分析
  15. 苹果开机是白苹果黑屏_这是苹果应如何回应史诗般的1984年诱饵
  16. c语言fat32文件格式,FAT32文件系统格式浅析
  17. ECSHOP后台提示 XMlHttpRequest status:[500] 解决办法2016年6月
  18. 永大电梯服务器显示连接断开,提供上海永大电梯服务器
  19. 在线教育企业如何精细化获客?
  20. linux下安装sl

热门文章

  1. 五、任意输入10个int类型数据,排序输出,再找出素数
  2. Imperva开源域目录控制器,简化活动目录集成
  3. Angular 依赖注入
  4. OpenGL 纹理学习总结
  5. TensorFlow教程之进阶指南 3.4 TensorBoard: 图表可视化
  6. 服务端JavaScript之Rhino
  7. ( KMP 求循环节的个数)Power Strings -- poj -- 2406
  8. [IoC容器Unity]第一回:Unity预览
  9. NSTimer用法,暂停,继续,初始化
  10. memcached安装配置