zoom：1是什么意思

全栈程序员-站长 • 2021年9月20日下午1:00 • 未分类 • 阅读 101

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

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="images/1.jpg" alt="" /> </</span>div> <</span>p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字 </</span>p>