网络编程
位置：首页>> 网络编程>> 网页设计>> css清除浮动的方法总结与选择（2）

css清除浮动的方法总结与选择（2）

作者：dudo　来源：dudo blog　发布时间：2008-06-06 12:58:00　

标签：浮动,方法,css,设计,布局

2）使用after伪类

使用after伪类和内容声明在指定的现在内容末尾添加新的内容。经常的做法就是添加一个“点”，因为它比较小不太引人注意。然后我们再利用它来清除浮动（闭合浮动元素），并隐藏这个内容：

#outer:after{  
    content:".";  
    height:0;  
    visibility:hidden;  
    display:block;  
    clear:both;  

但奇怪的是Windows中的Internet Explorer 6及以下版本并不支持CSS 2.1中的after伪类而Mac中的Internet Explorer却可以正常使用，所以我们还要单独针对Win/IE进行处理。在区分Win和Mac中Internet Explorer的诸多方法中，最常用就是Holly招数。Holly招数的原理是这样的，CSS代码

/* 这段代码只有IE/Win可以看见 \*/  
CSS 规则  
/* 结束Hack */  

上面的代码中有两行注释，其中第一行结束时出现了反斜杠（\），在Mac的Internet Explorer中会认为注释并没有结束，于是继续向下直到第一个完事的“*/”出现，这中间的所有字符都被当作是注释，而IE/Win却也只会把第一行和第三行看作是注释，中间的为有效代码。所以这样就区分出来了不同平台上的IE了。
正是基于以上原理，在windows的IE 6上的清理浮动，可以使用如下代码：


#outer {  
    display:inline-block;  
}  
/* Holly Hack Begine \*/  
* html #outer {  
    height:1％;  
}  
#outer {  
    display:block;  
}  
/* End Hack */  

例三：使用:after伪类清理浮动

P.S. 如果你不考虑 IE6/Mac用户的话你只需要写* html #outer {height:1％;}即可。
另外，似乎在Internet Explorer 7中不高display:inline-block也不好使。因此要使用最完整的Hack招数。

如果你对如何使用CSS 2中的伪类不熟悉的话，推荐你先阅读一下“细说CSS样式选择符——CSS 2.1 Selectors（1）、（2）、（3）”

第一页 上一页 1
2
3 下一页
0
投稿

猜你喜欢

手机版 网络编程 asp之家 www.aspxhome.com