zoom在清除浮动中的利用

  zoom 是个困惑了好久的元素,今天对它有了个初步的认识

  zoom , ie 的专属属性,在其他浏览器中不起作用,它的原本功能是设置或检测对象的缩放比例(只在ie下起作用)

比如

<div style="background:#f0f3f9; padding:20px; zoom:2;">
    <img data-src="http://XXXXX.jpg" border="0" />
</div>

在ie中它会使图片放大两倍显示。

在我们日常见到这个玩意的时候他一般用于浮动的清除,老的说法是可以触发ie的haslayout 来清除浮动

在 非ie 和 ie7及其以上版本的浏览器中,可以使用 overflow :hidden 等方法来进行清除浮动

可是在ie6 及其以下的浏览器中并不能正确的理解 overflow 这个属性,这是早期ie的一个bug

所以我们就可以用以下方式来清除浮动:

<div style="zoom:1; background:#f0f3f9; padding:20px;">
    <img style="float:left;" data-src="http://XXXXX.jpg" />
</div>

在ie6 及其以下的浏览器中,div 便有了高度, 此时再给它加上 其他浏览器和ie8+的清除浮动的方法 就可以完美结局  :)

时间: 2024-11-05 04:53:34

zoom在清除浮动中的利用的相关文章

.clearfix:after(清除浮动)中各个属性及值详细解说

清除浮动.clearfix:after一词,从事web前端的朋友们对此不会陌生吧,下面为大家介绍的是.clearfix:after中用到的所有属性及值的含义,对此感兴趣的朋友可以参考下哈想,希望对大家有所帮助 .clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容: content: "."; <----内容为“.”就是一个英文的句号而已.也可以不写. display: block; <----加入的这个元素转换为块级元素. 

16-CSS基础-清除浮动

<a href="http://study.163.com/course/courseMain.htm?courseId=1003864040">配套视频观看地址</a> 清除浮动 盒子高度问题 在标准流中内容的高度可以撑起盒子的高度 <style> div{ background-color: red; } p{ width: 200px; height: 100px; background-color: blue; } </style>

css 浮动布局,清除浮动

浮动的特性: (1)浮动元素有左浮动(float:left)和右浮动(float:right)两种 (2)浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 (3)相邻浮动的块元素可以并在一起,超出父级宽度就换行 (4)浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题) (5)浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,开成文字绕图的效果 (6)父元素如果没有设置尺寸(一般是高度不设置),父元素内整体浮动的元素无法撑开

清除浮动float那点事儿

抛弃那些没用的方法,只记住最实用的一种方法即可! 给要清除浮动的父元素多加一个class属性:clearfix!!! 样式如下: .clearfix:after{     content:".";             display:block;             height:0;             clear:both;             visibility:hidden; } 为了兼容ie6,ie7(现在的项目几乎已经完全不考虑) .clearfix{ z

前端开发入门到实战:css 浮动布局,清除浮动

浮动的特性: (1)浮动元素有左浮动(float:left)和右浮动(float:right)两种 (2)浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 (3)相邻浮动的块元素可以并在一起,超出父级宽度就换行 (4)浮动让行内元素或块元素自动转化为行内块元素(此时不会有行内块元素间隙问题) (5)浮动元素后面没有浮动的元素会占据浮动元素的位置,没有浮动的元素内的文字会避开浮动的元素,开成文字绕图的效果 (6)父元素如果没有设置尺寸(一般是高度不设置),父元素内整体浮动的元素无法撑开

CSS中清除浮动的两种方式

在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div class="father"> 2 <div class="div1">1</div> 3 <div class="div2">2</div> 4 <div class="div3

利用伪对象选择器E:after实现清除浮动效果

利用伪对象选择器E:after实现清除浮动效果:关于清除浮动已经是老生畅谈的问题,文章实在是太多了,几乎已经被谈烂了.这当然是因为浮动是不居中必须要用到的技巧,那么清除浮动自然也是必须的,但是本章节还是要啰嗦一下,再次介绍一下清除浮动的方法的一种,因为它会用到之前比较少见的伪对象选择器,希望能够引起大家的注意.先看一段代码实例: <!DOCTYPE html> <html> <head> <meta charset=" utf-8"> &

详细解读css中的浮动以及清除浮动的方法

对于前端初学者来说,css浮动部分的知识是一块比较难以理解的部分,下面我将把我学习过程中的心得分享给大家. 导读:   1.css块级元素讲解 2.css中浮动是如何产生的 3.出现浮动后,如何清除浮动(本文将涉及到多种清除浮动的方法) 博客正文:   1.css块级元素讲解 常见的块级元素主要有以下几种:<div>.<p>.<h1>...<h6>.<ol>.<ul>.<dl>.<table>.<addr

css中的浮动与三种清除浮动的方法

说到浮动之前,先说一下CSS中margin属性的两种特殊现象 1, 外边距的合并现象: 如果两个div上下排序,给上面一个div设置margin-bottom,给下面一个div设置margin-top,那么两个margin会发生合并现象,合并以后的值较大的那个. 对于这种现象一般不用处理. 2,margin塌陷现象: 如果一个大盒子中包含一个小盒子给小盒子设置margin-top大盒子会一起向下平移. 解决方案: 1.0给大盒子加一个边框border属性. 2.0给大盒子设置一个overflow