细微之处:比较两种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 属性.而且同样的 ...
随机推荐
- ubuntu chmod 无法更改 文件夹权限 系统提示“不允许的操作 2、linux 如何修改只读文件 3、ubuntu安装
1.ubuntu chmod 无法更改 文件夹权限 系统提示“不允许的操作 答案:需要超级用户权限 sudo 2.linux 如何修改只读文件 答案:可以使用chmod命令,为改文件提供其他的权限.u ...
- 2016 版 Laravel 系列入门教程(一)【最适合中国人的 Laravel 教程】
本教程示例代码见: https://github.com/johnlui/Learn-Laravel-5 在任何地方卡住,最快的办法就是去看示例代码. 本文基于 Laravel 5.2 版本,无奈 5 ...
- struts2中把action中的值传递到jsp页面的例子
例子: RegistAction的代码: package com.wss.action; import javax.servlet.http.HttpServletRequest; import or ...
- CSS文字排版
一.font-size 我来试一试:为第一段中的“胆小如鼠”设置字号为:20px,字体颜色为:red. <!DOCTYPE HTML> <html> <head> ...
- 【poj1009】 Edge Detection
http://poj.org/problem?id=1009 (题目链接) 不得不说,poj上的水题还是质量非常高的= =,竟然让本大爷写了一下午. 转自:http://blog.sina.com.c ...
- [NOIP2011] 提高组 洛谷P1311 选择客栈
题目描述 丽江河边有n 家很有特色的客栈,客栈按照其位置顺序从 1 到n 编号.每家客栈都按照某一种色调进行装饰(总共 k 种,用整数 0 ~ k-1 表示),且每家客栈都设有一家咖啡店,每家咖啡店均 ...
- python库requests登录zhihu
废了很大劲,开始搞错了登录post信息的网址,后来没找到xsrf信息,看了很多文章才搞定. 大概过程如下: 打开登录页面,同时打开fldder,输入信息去监控过程. 查看post了哪些信息,哪些是自己 ...
- 根据.MDF文件查看 SQL数据库的版本信息
http://www.cnblogs.com/eason-chan/p/3695753.html?utm_source=tuicool 手上有 经理带来的一个教学管理系统,由于不知道开发环境,在向SQ ...
- 嵌入式实时操作系统μCOS原理与实践任务控制与时间的解析
/*************************************************************************************************** ...
- ExtJS入门教程06,grid分页的实现
前面两篇内容分别介绍了extjs grid的基本用法和extjs grid异步加载数据,这篇文章将介绍extjs grid的分页. 数据量大的时候我们必须用到分页,结合上一篇的异步加载数据,今天我们就 ...