当一个容器内元素都浮动后,它将高度将不会随着内部元素高度的增加而增加,所以造成内容元素的显示超出了容器。

overflow:auto;是让高度自适应,
zoom:1;是为了兼容IE6,也可以用height:1%;的方式来解决

1、浮动

  浮动是CSS中用到的最多的一个选项,他有三个性质。关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动。

  1.1 浮动元素脱离标准文档流

    1.1.1
大概描述:有两个盒子,一个盒子浮动,一个盒子不浮动。浮动的盒子会脱离标准文档流,不浮动的盒子会在标准文档流中成为第一个,所以两者出现覆盖现象。

    

    1.1.2
大概描述:一个行内标签在标准文档流中是不能设置宽高的,但是使用float使其脱离文档流之后,就可以对其设置宽高了。所有浮动的标签不会去区分行内标签和块级标签。也就是说: 一旦一个元素浮动了,那么,将能够并排了,并且能够设置宽高了。无论它原来是个div还是个span。

  1.2 浮动的元素互相贴靠 

    以float向左浮动为例:

    如果有足够空间,那么就会靠着2哥。如果没有足够的空间,那么会靠着1号大哥。

    如果没有足够的空间靠着1号大哥,自己去贴左墙。

    

  1.3 浮动元素有“自围”的效果

    自围效果就是:浮动的盒子可以遮盖文档标准流的第一个盒子,但是不会遮盖里面的文字,文字会围绕浮动的盒子显示。

    在CSS代码中让div浮动,p不浮动,那么p中的文字就睡形成这种自围效果。

<</span>div>
<</span>img src="data:images/1.jpg" alt="" />
</</span>div>
<</span>p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</</span>p>

    

zoom:1是什么意思的更多相关文章

  1. Nike Zoom Winflo 2 Kvinder Sko Når jeg set elementet

    De fleste af os elskede denne Nike Pegasus 34 foruden var ved at blive begejstret for at få dine ben ...

  2. css zoom属性兼容ie,firefox,chrome

    jquery代码: $("body").css({ "zoom":"2", "transform":"scal ...

  3. Selenium通过WebDriver控制IE浏览器出错 Browser zoom level was set to 109%. It should be set to 100%

    错误信息: WebDriverException: Message: Unexpected error launching Internet Explorer. Browser zoom level ...

  4. 关于scale和zoom的区别

    其实关于scale,我之前是用他来搞一些css3的特效的放大缩小啊,玩的也挺6666,而*zoom:1之前是用来做css的hack,也就是触发IE6/7的haslayout清除浮动的.终于某天,好事的 ...

  5. [WPF系列]-Deep Zoom

        参考 Deep Zoom in Silverlight

  6. CSS中不为人知Zoom属性的使用介绍(IE私有属性)

    其实Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可以设置或检索对象的缩放比例.除此之外,它还有其他一些小作用,比如触发ie的hasLayout属性,清除浮动.清除margin的 ...

  7. zoom在css中的作用

    zoom:1 zoom:1;属性是IE浏览器的专有属性,Firefox等其它浏览器不支持.它可以设置或检索对象的缩放比例. 兼容IE6.IE7.IE8浏览器,经常会遇到一些问题,可以使用zoom:1来 ...

  8. zoom和transform:scale的区别

    小tips: zoom和transform:scale的区别 这篇文章发布于 2015年11月3日,星期二,00:52,归类于 css相关. 阅读 7876 次, 今日 8 次 by zhangxin ...

  9. 【 D3.js 进阶系列 — 6.1 】 缩放的应用(Zoom)

    缩放(Zoom)是另一种重要的可视化操作,主要是使用鼠标的滚轮进行. 1. zoom 的定义 缩放是由 d3.behavior.zoom() 定义的. var zoom = d3.behavior.z ...

  10. d3 API zoom

    常用的看明白了,还有几个地方不太明白. zoom函数: area path circle .on("zoom", function(){ that.svg_obj.select(& ...

随机推荐

  1. python科学计算_scipy_常数与优化

    scipy在numpy的基础上提供了众多的数学.科学以及工程计算中常用的模块:是强大的数值计算库: 1. 常数和特殊函数 scipy的constants模块包含了众多的物理常数: import sci ...

  2. VS2010 Extension实践(3)——实现自定义配置

    在之前的两篇曾提到通过VSSDK(MSDN也叫VSX)来拓宽思路,实现一些MEF Extension所不能做到的功能,比如获取IVsUIShell服务来执行Command等等,这里我给各位看官展示如何 ...

  3. Kill 进程

      动态杀各种进程,谨慎操作:事例 status='sleeping'   --AUTHOR      KiNg --DATE        2016-05-30 DECLARE @SPID INT ...

  4. 每天学一点Docker(6)——镜像和DockerFile

    镜像的分层结构: 实际上,Docker Hub 中 99% 的镜像都是通过在 base 镜像中安装和配置需要的软件构建出来的.比如我们现在构建一个新的镜像,Dockerfile 如下: ① 新镜像不再 ...

  5. python字符集的转换(mysql数据乱码的处理)

    本文参考:http://blog.csdn.net/crazyhacking/article/details/39375535 chardet模块:http://blog.csdn.net/tianz ...

  6. Netty之心跳检测技术(四)

    Netty之心跳检测技术(四) 一.简介 "心跳"听起来感觉很牛X的样子,其实只是一种检测端到端连接状态的技术.举个简单的"栗子",现有A.B两端已经互相连接, ...

  7. [SharePoint Online]SharePoint Designer无法打开世纪互联版sp online站点得解决方法,报错信息:请安装更新后再重新打开

    现象描述: 装了个x64版SharePoint designer 2013, 没有装SP1,在打开国际版得office 365 online得时候完全没有问题,但是在打开世纪互联版得时候就打不开,让安 ...

  8. SQL Server 禁用扩展存储过程

    概述 扩展存储过程是 SQL Server 实例可以动态加载和运行的 DLL.扩展存储过程是使用 SQL Server 扩展存储过程 API 编写的,可直接在 SQL Server 实例的地址空间中运 ...

  9. [Spark性能调优] 第四章 : Spark Shuffle 中 JVM 内存使用及配置内幕详情

    本课主题 JVM 內存使用架构剖析 Spark 1.6.x 和 Spark 2.x 的 JVM 剖析 Spark 1.6.x 以前 on Yarn 计算内存使用案例 Spark Unified Mem ...

  10. COM学习(四)——COM中的数据类型

    上一次说到,COM为了跨语言,有一套完整的规则,只要COM组件按照规则编写,而不同的语言也按照对应的规则调用,那么就可以实现不同语言间相互调用.但是根据那套规则,只能识别接口,并调用没有参数和返回类型 ...