清除浮动的最简写法
作者：yemoo 来源：yemoo博客 发布时间：2009-03-30 15:58:00
元素浮动导致的问题及解决办法大家都应该很熟悉了，举个简单的例子：
以上代码的目的是制作一个简单的横向菜单，但因为对所有的li采用了浮动，导致ul高度丢失，其边框不能包含li元素，解决办法就是对ul子元素清除浮动。
网上很流行的一段清除浮动的代码如下：
.clearfix {height: 1％;}
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
对于IE只要使元素拥有Layout属性即可清除浮动，方法有很多，如height:1％,overflow:hidden,zoom:1等，但我们一般应选取尽可能不造成副作用的方式，即最优办法是采用zoom:1的办法。
对于符合标准的浏览器，一般采用CSS的:after伪类为浮动元素后面增加一个清除浮动的元素来实现。上面的代码通过增加一个.号，然后通过clear:both;display:block来清除浮动，然后通过visibility:hidden和height:0来隐藏这个点号。
上面的写法其实并不是最简的，根据我自己的试验及在51js上看到某人的办法后尝试出了一个更简单且兼容所有浏览器的写法：
.clearfix {zoom:1}
.clearfix:after {
content: '\20';
display: block;
clear: both;
}
content:'\20'指定在浮动列表后增加一个空白字符，首先这个字符不可见，无需visibility:hidden来隐藏，其次他没有高度，无需height:0来隐藏其高度。因此这样就大大简化了原来的代码同时也达到了清除浮动的目的。
下面是完整代码：
0
投稿猜你喜欢
- 见下表：序号保留字序号保留字序号保留字1ADD80ESCAPE159OR2ABSOLUTE81EXCEPT160ORDER3ACTION82
- 今天来讲一下一些实现html中表格隔行换色的方法，即每隔一个行表格的背景色就不同，有静态html/css实现的，也有asp动态实现的。这个功
- 代码如下:CREATE FUNCTION dbo.f_splitstr( @str varchar(8000) )RETURNS
- 以下的文章主要是介绍SQL Server数据库与其实际应用元数据，我前两天在相关网站看见SQL Server数据库与其实际应用元数据的资料，
整本书围绕着一个叫做“CSS禅意花园”的网站展开，其实N久之前我在一份外国的关于CSS的在线教程上看到了这个网站的链接，可惜进去之后发现内容- 本文代码将一些简单常用的SQL语句，拆分、封装成链式函数与终结函数，链式操作没有先后之分，实现傻瓜式mysql数据库操作。 同时学习下静态成
- 在用到编辑器时，就会碰到一点，那就是标签的闭合问题，这个问题非常严峻，因为这可能会导致网页显示的整体样式受到破坏。这最近在PJ的functi
- 下面代码写的是js验证检查输入的字符是否是全角的函数：效果演示：<script> function i
- Installing mysql (2.8.1) with native extensions /usr/local/lib/ruby/si
- 对文本类文件（*.txt;*.html;*.doc;等等），图片类文件（*.jpg;*.gif等等）直接点击链接时会在浏览器打开，而无法出现
- 在XHTML中定义ID、CLASS都用得上，主要是方面CSS定义样式时能一眼看穿。所以，CSS命名仅作参考。(1)页面结构类容器: cont
- MS SQL Server 2000通过企业管理器设置数据库的定期自动备份计划。1、打开企业管理器，双击打开你的服务器2、然后点上面菜单中的
- jQuery的makeArray有其局限性（1.3.4还有bug），我自己实现了一个，不过涉及N多辅助方法。var dom = {},_to
- /* 小弟刚刚接触ORACLE存储过程，有一个问题向各位同行求教，小弟写了一个存储过程，其目的是接收一个参数作为表名，然后查询该表中的全部记
- 在安装了IIS以后，缺省的服务器端脚本语言被设置成VBScript。许多Web 开发团队在他们的开发环境中保持了这些缺省设置，这是不幸的，因
- 代码如下: public function fillzero(l1) if len(l1)=1 then fillzero="0&
- 在dreamweaver4中，你可以存储你自己设定的图片，链接，flash影片，颜色表，模板等等，组成这个站点的资产，这就是Assets面板
- 五、过渡转化的使用在《mind hack》一书中，揭示了人脑鲜为人知的工作原理。其中提到了“突然的移动或闪烁会吸引人的注意力，这正是负责视觉
- 如下拉框的text是<input type=button value=ggg>，那么生成的combobox里
- 当服务器必须提供与两个或更多个网络或网络子网的连接时，典型的方案是使用多宿主计算机。此计算机通常位于外围网络（也称为 DMZ、外围安全区域或
