http://www.cnblogs.com/bienfantaisie/archive/2011/05/27/2059597.html

清除浮动是连续浮动元素之后的必备工作,在工作中我做到需要清除浮动的地方都要清除。

比如,我在瑞星的项目中一直这样使用:

.clear:after{content:'\0020';display:block;height:0;clear:both}
.clear{*zoom:1}

观察腾讯微博项目,并不是每个浮动必须清除,但是如果内部元素连续浮动,其外部元素必然定高以避免找不到高度的情况,其清除浮动的代码如下:

.clear:after{content:'.';clear:both;display:block;height:0;visibility:hidden;
line-height:0}
.clear{zoom:1}

腾讯微博的.clear和许多选择器并列在一起,如:

.clear,.LC,.topicList,.mediaWrap,.cellMod{zoom:1}

我和腾讯微博的技术总监聊过这里可以去掉.LC等其余的选择器,并在这些类上定义clear的类,这个问题肯定是遗留的,不过对性能没有影响。瑞星一个老资历的前端说是尽量减小html文件,这些大小可以作为代价转移到css文件上,不过我个人觉得css简洁一些,方法统一一些也是好事。

比较瑞星和腾讯的清除浮动的代码,有一些地方是不一样的,我在做瑞星的项目时,一开始采用的也是和腾讯一样的办法,在连续浮动元素后面追加'.',这样一来,页面中会出现大量的'.'字符,所以这种办法一定要定义visibility:hidden的属性。现在的瑞星项目采用的办法是在连续浮动元素后面追加空格(\0020),这样就不需要visibility和line-height属性,因空格在页面中是不可见的,而且html代码中的单个空格对页面显示并不会产生影响。在zoom:1的定义上,瑞星的定义只针对了会出问题的IE7和IE6浏览器,腾讯的代码针对所有浏览器,这里腾讯的代码可能在浏览器针对性上不如瑞星的代码。当然也有可能是为了更多浏览器的兼容,而我还没有研究到。

#1楼 2011-05-27 11:00 于安 
学习了: content
还有 .clear:after的写法, 这对应是怎么使用?

#2楼[楼主] 2011-05-27 11:06 BennyChia 

@于安
:after伪类受ie8以上支持,简单说就是在元素之后追加内容,需要和content属性一起使用,有点像jQuery里面的append()方法

#3楼 2011-05-27 12:03 Gray Zhang 

把.LC等全去掉,语义性会破坏得更加厉害,那这个class是不是干脆也别叫clear了,直接叫zoom-fix更好一点?
zoom这东西本来就是IE专有,且基本没有副作用,其他浏览器一概不认,所以加不加*其实无所谓,不需要担心未来的CSS会有zoom这属性,因为缩放已经被css3 transform实现了

#4楼 2011-05-27 13:09 code_flyer 

呵呵,这种技术很普遍的,来源于国外的clearfix 技术。
http://www.webtoolkit.info/css-clearfix.html

#5楼 2011-05-27 13:20 yonghu86 

值得推荐。

#6楼 2011-05-27 14:51 Jiyp 

:after伪类ie7也支持,请博主修正。另外问个问题:zoom:1 ,可以清理ie6的浮动么?我试了一下,怎么不好使呢

#7楼[楼主] 2011-05-27 15:03 BennyChia 

zoom:1不是用来清除浮动的,它是配合上面的:after来让ie6和7找到容器自身高度的

#8楼 2011-05-27 20:19 Gray Zhang 

@BENNY CHIA
IE6根本不认:after,zoom是为了触发hasLayout的,有了hasLayout的元素自动就有清浮动的特性

#9楼 2011-05-28 10:22 Jiyp 

@Gray Zhang
根据你的意思,那是不是可以理解为:在ie6下,让元素hasLayout,也就是变向的清楚浮动了?

#10楼 2011-05-28 11:26 Loveyuki 

一直用 .clear {clear:both; overflow:hidden; zoom:1; }

#11楼 2011-06-02 10:27 632611768 

学习了,哈哈..

#12楼 2011-06-02 10:56 Gray Zhang 

@Jiyp
IE下hasLayout的元素有很多特性,清浮动是其中之一,另外还有可设置width/height等其他效果

#13楼 2011-06-02 13:14 Lecaf 

我觉的overflow:hidden最好也加上,比较IE6的最小高度bug

#14楼 2012-12-24 15:43 semanwmj 

zoom:1有用吗?我怎么感觉加和不加一样啊

#15楼[楼主] 2012-12-24 16:03 BennyChia 

@semanwmj
在ie中zoom:1可以触发haslayout,IE中是有用的:)

#16楼 2012-12-24 16:34 semanwmj 

@BennyChia
可是触发和不触发也没看到有什么区别呀?

细微之处:比较两种CSS清除浮动的兼容的更多相关文章

  1. 8种CSS清除浮动的方法优缺点分析

    为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...

  2. css清除浮动大全共8种方法

    原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...

  3. CSS清除浮动八种方法

    在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...

  4. 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...

  5. CSS清除浮动大全的8种方法

    清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...

  6. css清除浮动float的几种方法

    摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?     一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...

  7. 活学活用,CSS清除浮动的4种方法

    清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...

  8. CSS 清除浮动的4种方法

    此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景.<style type=”text/css”> <!– *{margin:0;padding:0;} body{font: ...

  9. css清除浮动的八大方法

    清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...

随机推荐

  1. go语言的模板,text/template包

    go语言的模板,text/template包 定义 模板就是将一组文本嵌入另一组文本里 传入string--最简单的替换 package main import ( "os" &q ...

  2. 一条命令使win7可以直接运行.net3.5程序

    dism /online /get-features 获取 功能名称 dism /online /enable-feature /featurename:NetFx3  启用win7自带的.net f ...

  3. JPanel设置图片

    package com.gr.db; import javax.swing.*; import java.awt.*; import java.awt.event.*; public class We ...

  4. Cocos2d-X3.0 刨根问底(五)----- Node类及显示对象列表源码分析

    上一章 我们分析了Cocos2d-x的内存管理,主要解剖了 Ref.PoolManager.AutoreleasePool这三个类,了解了对象是如何自动释放的机制.之前有一个类 Node经常出现在各种 ...

  5. JAVA的整型与字符串相互转换

    1如何将字串 String 转换成整数 int? A. 有两个方法: 1). int i = Integer.parseInt([String]); 或 i = Integer.parseInt([S ...

  6. [原]Golang FileServer

    转载请注明出处 今天我们用go来搭建一个文件服务器FileServer,并且我们简单分析一下,它究竟是如何工作的.知其然,并知其所以然! 首先搭建一个最简单的,资源就挂载在服务器的根目录下,并且路由路 ...

  7. opencv笔记4:模板运算和常见滤波操作

    time:2015年10月04日 星期日 00时00分27秒 # opencv笔记4:模板运算和常见滤波操作 这一篇主要是学习模板运算,了解各种模板运算的运算过程和分类,理论方面主要参考<图像工 ...

  8. poj 3311 tsp入门

    题意:n+1个点:0--n,找一条路径从0点出发遍历1--n的点再回到0,每个点可经过不止一次,求最短路径 裸的TSP问题,先用Floyd求出各个点之间最短路,再状压dp即可 用n+1位二进制表示状态 ...

  9. HackerRank and MiniMax

    传送门 Sherlock and MiniMax Authored by darkshadows on May 07 2014 Problem Statement Watson gives Sherl ...

  10. Android:View中的performClick()触发条件

    http://blog.sina.com.cn/s/blog_70ae1d7b0102v7uk.html 先看看performClick()源码:   public boolean performCl ...