细微之处:比较两种CSS清除浮动的兼容
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浏览器,腾讯的代码针对所有浏览器,这里腾讯的代码可能在浏览器针对性上不如瑞星的代码。当然也有可能是为了更多浏览器的兼容,而我还没有研究到。
#3楼 2011-05-27 12:03 Gray Zhang
#4楼 2011-05-27 13:09 code_flyer
http://www.webtoolkit.info/css-clearfix.html
#8楼 2011-05-27 20:19 Gray Zhang
#12楼 2011-06-02 10:56 Gray Zhang
细微之处:比较两种CSS清除浮动的兼容的更多相关文章
- 8种CSS清除浮动的方法优缺点分析
为什么清除CSS浮动这么难? 因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让 ...
- css清除浮动大全共8种方法
原文链接http://www.jb51.net/css/173023.html 清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同 ...
- CSS清除浮动八种方法
在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了,下面总结8种清除浮动的方法,测试已通过 ie chrome firefox opera,需要的朋友可以参考下 清除浮动是每一个 web前台设 ...
- 【转】css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响?
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 分析HTML代码结构: <div class ...
- CSS清除浮动大全的8种方法
清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...
- css清除浮动float的几种方法
摘要: css清除浮动float的三种方法总结,为什么清浮动?浮动会有那些影响? 一.抛一块问题砖(display: block)先看现象: 这里我没有给最外层的DIV.outer 设置高度, ...
- 活学活用,CSS清除浮动的4种方法
清除浮动这个问题,做前端的应该再熟悉不过了,咱是个新人,所以还是记个笔记,做个积累,努力学习向大神靠近. CSS清除浮动的方法网上一搜,大概有N多种,用过几种,说下个人感受. 1.结尾处加空div标签 ...
- CSS 清除浮动的4种方法
此为未清除浮动源代码,运行代码无法查看到父级元素浅黄色背景.<style type=”text/css”> <!– *{margin:0;padding:0;} body{font: ...
- css清除浮动的八大方法
清除浮动是每一个 web前台设计师必须掌握的机能.css清除浮动大全,共8种方法. 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签.父级标签的位置及 width height 属性.而且同样的 ...
随机推荐
- go语言的模板,text/template包
go语言的模板,text/template包 定义 模板就是将一组文本嵌入另一组文本里 传入string--最简单的替换 package main import ( "os" &q ...
- 一条命令使win7可以直接运行.net3.5程序
dism /online /get-features 获取 功能名称 dism /online /enable-feature /featurename:NetFx3 启用win7自带的.net f ...
- JPanel设置图片
package com.gr.db; import javax.swing.*; import java.awt.*; import java.awt.event.*; public class We ...
- Cocos2d-X3.0 刨根问底(五)----- Node类及显示对象列表源码分析
上一章 我们分析了Cocos2d-x的内存管理,主要解剖了 Ref.PoolManager.AutoreleasePool这三个类,了解了对象是如何自动释放的机制.之前有一个类 Node经常出现在各种 ...
- JAVA的整型与字符串相互转换
1如何将字串 String 转换成整数 int? A. 有两个方法: 1). int i = Integer.parseInt([String]); 或 i = Integer.parseInt([S ...
- [原]Golang FileServer
转载请注明出处 今天我们用go来搭建一个文件服务器FileServer,并且我们简单分析一下,它究竟是如何工作的.知其然,并知其所以然! 首先搭建一个最简单的,资源就挂载在服务器的根目录下,并且路由路 ...
- opencv笔记4:模板运算和常见滤波操作
time:2015年10月04日 星期日 00时00分27秒 # opencv笔记4:模板运算和常见滤波操作 这一篇主要是学习模板运算,了解各种模板运算的运算过程和分类,理论方面主要参考<图像工 ...
- poj 3311 tsp入门
题意:n+1个点:0--n,找一条路径从0点出发遍历1--n的点再回到0,每个点可经过不止一次,求最短路径 裸的TSP问题,先用Floyd求出各个点之间最短路,再状压dp即可 用n+1位二进制表示状态 ...
- HackerRank and MiniMax
传送门 Sherlock and MiniMax Authored by darkshadows on May 07 2014 Problem Statement Watson gives Sherl ...
- Android:View中的performClick()触发条件
http://blog.sina.com.cn/s/blog_70ae1d7b0102v7uk.html 先看看performClick()源码: public boolean performCl ...