您现在的位置是：网站首页> 编程资料编程资料
详解CSS中zoom属性或overflow:auto属性清除浮动的作用ie7中overflow:auto无效的解决方法DIV背景图片在Firefox下不显示通过overflow:auto可解决CSS教程:导致一些问题的overflow-CSS教程-网页制作-网页教学网overflow:auto的用法详解
2021-09-04
1109人已围观
简介 这篇文章主要为大家介绍了CSS中zoom属性或overflow:auto属性清除浮动的作用,文中通过实例代码介绍的很详细，相信会对大家的理解和学习具有一定的参考借鉴价值，有需要的朋友们可以参考借鉴，下面跟着小编一起来学习学习吧。
前言
其实在CSS中的Zoom这个属性一般不为人知，甚至有些CSS手册中都查询不到。其实Zoom属性是IE浏览器的专有属性，Firefox等浏览器不支持。它可以设置或检索对象的缩放比例。除此之外，它还有其他一些作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。
因为Zoom属性是IE浏览器的专有属性，所以他清除浮动作用只适用于IE浏览器，而Firefox、google等浏览器则需要使用overflow:auto属性来清除浮动。所以要达到兼容IE6、IE7、IE8、Firefox、google浏览器的时候就必需使用这两个属性。
我们在重构页面的时候经常会使用到一个大容器里面包含多个浮动小容器的布局，但是如果外面这个大容器的没有设置固定的高度值，那么大容器高度不会随着里面小容器高度变化而变化，产生内容溢出的现象，这时只需要清除浮动就会恢复正常。所以只要给外面大容器加上overflow:auto的属性，可以解决IE7和火狐浏览器下的清除浮动问题，但是IE6下不生效，所以我们还需要使用zoom这个IE的私有属性来达到彻底清楚浮动的兼容效果。
实例代码
MJBlog 这个没加overflow:auto和zoom:1属性，没有清除浮动，底下的li产生溢出重叠现象
福州酒吧万圣节派对活动福州酒吧万圣节派对活动福州酒吧万圣节派对活动福州酒吧万圣节派对活动福州酒吧万圣节派对活动福州酒吧万圣节派对活动这个加overflow:auto和zoom:1属性，清除浮动，正常
福州酒吧万圣节派对活动福州酒吧万圣节派对活动福州酒吧万圣节派对活动福州酒吧万圣节派对活动福州酒吧万圣节派对活动福州酒吧万圣节派对活动
总结
以上就是关于CSS中zoom属性和overflow:auto属性清除浮动作用的全部内容，希望本文的内容对大家的工作或者学习能有所帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。
相关内容
- 无需JS和jQuery代码实现CSS3鼠标浮动放大图片css3动画鼠标放上图片逐渐变大鼠标离开图片逐渐缩小效果基于CSS3实现鼠标滑过图片上移代码用纯css3实现的图片放大镜特效效果非常不错
- CSS3实现文字波浪线效果示例代码纯CSS实现波浪移动效果的示例纯css3制作鼠标悬停波浪形状弹性下拉菜单特效源码css3实现逼真的波浪起伏动画特效源码CSS3实现的波浪闪动文字动画特效源码纯css3实现的音阶波浪loading加载动画特效源码纯css3实现的文字波浪动画特效源码纯CSS3实现波浪形菜单效果源码纯CSS3实现3D波浪形动画有波浪起伏的效果CSS Houdini实现动态波浪纹效果
- CSS3常用的几种颜色渐变模式总结利用CSS3把图片变成灰色模式的实例代码什么是CSS3 HSLA色彩模式？HSLA模拟渐变色条CSS3 RGBA色彩模式使用实例讲解CSS3色彩模式有哪些？CSS3 HSL色彩模式的定义使用CSS实现黑暗模式和高亮模式的切换功能
- IE8下CSS3选择器nth-child() 不兼容问题的解决方法css3之UI元素状态伪类选择器实例演示总结30个CSS3选择器 css3类选择器之结合元素选择器和多类选择器用法对CSS3选择器的研究(详解)详解CSS3中属性选择器新增加的特性CSS3中的常用选择器使用示例整理CSS3 新增选择器的实例
- CSS3 box-sizing属性详解谈谈对css属性box-sizing的了解css3 盒模型以及box-sizing属性全面了解使用CSS3的box-sizing属性解决div宽高被内边距撑开的问题CSS3属性box-sizing使用指南css3 box-sizing属性使用参考指南CSS3 box-sizing属性详解CSS3中的box-sizing（content-box与border-box）
- 用CSS3的box-reflect来制作倒影效果5分钟让你掌握css3阴影、倒影、渐变小技巧(小编推荐)用CSS3的box-reflect设置文字倒影效果的方法讲解CSS3制作文字半透明倒影效果的两种实现方式Css3实现带倒影的3D图片走廊的效果代码利用CSS3把图片变成灰色模式的实例代码CSS3实现圆形图片鼠标悬停图片旋转放大特效源码纯CSS3实现图片无间断轮播效果纯js和CSS3分散式宝丽来图片画廊CSS3鼠标滑过图片标题和遮罩层动画特效源码纯css3实现的鼠标滑过图片左右3d翻转效果源码
- CSS3毛玻璃效果(blur)有白边问题的解决方法利用CSS3实现毛玻璃效果示例源码使用CSS3滤镜的filter:blur属性制作毛玻璃模糊效果的方法CSS毛玻璃效果如何实现css实现照片模糊效果类似毛玻璃效果iframe去边框、无边框使用大全(实践经验整理)CSS3打造磨砂玻璃背景效果一款html5 canvas实现的图片玻璃碎片特效css3 iphone玻璃透明气泡完美实现CSS实现文字高光水波渐变的动态效果实例纯CSS3实现图片无间断轮播效果
- CSS边界线消失的问题详解CSS3圆角边框和边界图片效果实例 css控制边界与边框示例(内边距、外边距使用方法)CSS中的边界margin的取值为负值说明掌握盒模型轻松DIV CSS网页布局CSS3简单带下划线跟随下拉菜单特效源码CSS3 渐变（Gradients）之CSS3 线性渐变 CSS3实现的鼠标滑过边框线条动画特效源码纯css3基于svg实现鼠标经过按钮边框线条动画特效源码纯CSS3实现的鼠标经过文字倾斜线性变换动画特效源码
- CSS3实现多背景模拟动态边框的效果基于CSS 属性实现按钮悬停边框和背景动画集合CSS 制作带边框背景色透明的消息框css3 边框、背景、文本效果的实现代码CSS控制背景图像平铺实现边框阴影效果css div 边框阴影利用背景图或内外层div实现层次感觉阴影效果css样式div或li在ie6下背景平铺及border边框断线解决技巧 CSS新特性:圆角边框多栏Gird布局背景设置css背景和边框标签实例详解
- HTML5+CSS3实例 ：canvas 模拟实现电子刮刮乐代码html5 canvas实现的可用于手机端手指滑动刮刮乐效果源码Html5 Canvas 实现一个“刮刮乐”游戏
