清除浮动的最简写法

元素浮动导致的问题及解决办法大家都应该很熟悉了，举个简单的例子：

<style type="text/css"> 
ul{border:1px solid #ccc} 
ul li{float:left;width:120px;line-height:25px;text-align:center} 
</style> 
<ul><li>选项一</li><li>选项二</li><li>选项三</li></ul> 

以上代码的目的是制作一个简单的横向菜单，但因为对所有的li采用了浮动，导致ul高度丢失，其边框不能包含li元素，解决办法就是对ul子元素清除浮动。

网上很流行的一段清除浮动的代码如下：

.clearfix {height: 1%;}
.clearfix:after {
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

 

.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;  
}

 

.clearfix {zoom:1} .clearfix:after { content: '\20'; display: block; clear: both; }

content:'\20'指定在浮动列表后增加一个空白字符，首先这个字符不可见，无需visibility:hidden来隐藏，其次他没有高度，无需height:0来隐藏其高度。因此这样就大大简化了原来的代码同时也达到了清除浮动的目的。

下面是完整代码：

 

<style type="text/css"> 
.clearfix {zoom:1} 
.clearfix:after { 
content: '\20'; 
display: block;  
clear: both; 
} 
ul{border:1px solid #ccc} 
ul li{float:left;width:120px;line-height:25px;text-align:center} 
</style> 
<ul class="clearfix"><li>选项一</li><li>选项二</li><li>选项三</li></ul>